Devices
I put every device I can remember having or wanting on one timeline you can drag through. There are 87 of them, from 1976 to now. I can mark each one had or wanted, and every date keeps its source.
Where it started
Two weeks earlier I had an idea for a site of forgotten devices. I sent it to Astra, mostly to see what Astra could do.
i want to make a site for forgotten devices from my childhood, they should look realistic, and usable for their intended purpose
i want 50 devices in a grid.
Every image on it is an Astra generation.
Then I saw this. You drag through the years and the button under your cursor changes.
I liked it, and I already had fifty devices. Put them together.
We built a little website with images of forgotten devices on here.now. So can you find where those devices were all rendered and created? And I want you to make a very simple site that is a timeline scrubber, and as you scrub the years from left to right, you get to see which device is different. Like you get to see the device of the year, or like when that device was popular or around, like the site is doing for this button timeline.
https://mac-buttons-timeline.vercel.app
A minute later it had the images and the prompts that made them, and it made three versions (Prototyping).
Do option C, but I want the timeline to be scrubbable, where I can drag my finger left and right across the timeline, and that will change the device. And we need to make sure we find the exact dates for each of the devices when they were released, because right now we've got a bunch of devices that are just in 1990s.
It did that. But the grid stopped at the 2000s, so I had subagents (Talking to agents) go and get a device for every missing year, up to the iPhone Duo.
ok now we need devices from 2009 to today (today the iphone duo) use subagents
Some of the original fifty were a kind of thing, not a thing. “Cassette Walkman, 1990s, approximate.” You can’t put that on a timeline. So for each one it worked out the real model, found a reference photo of it, and generated a new image of that exact device.
~/projects/devices/prompts.md
Use case: product-mockup. Create a photorealistic museum catalog cutout of ONE historically accurate device. Use supplied image as hardware reference, not background. Straight-on front elevation, no perspective rotation. Entire object centered with 6% padding, square canvas. Genuine transparent alpha background, no floor or cast shadow, no hands, no extra objects. Soft even studio lighting, detailed real materials. All electronic screens blank/off, no invented screen contents. Preserve authentic physical controls and proportions. Subject: silver Casio Data Bank CD-401 (1984), matching the silver metal bracelet model shown in reference. Square silver case, black calculator face with four small silver memory buttons ABOVE the rectangular gray LCD, twelve small silver calculator buttons BELOW it, CASIO and turquoise DATA BANK markings. Both bracelet sections visible above and below. Blank pale gray LCD. Exact reference layout, not later DBC model.
Had or wanted
Now it worked. I wanted two buttons under the timeline, had and wanted, with counts, so people could vote. And if you vote, you should get a page of your own showing what you picked.
when a user votes had/wanted we should give them a page or something that they can share to show what devices they had. mock something up with image gen
On my site
I wanted it on my homepage, not on a here.now slug.
then publish it to bentossell.com/devices, link to it from my bentossell.com homepage (repos/bentossell on my machine)
The here.now skill (My setup) does the domain, so a here.now site can sit at a path on bentossell.com.
How it works
The bit I like: a vote is never edited. Pressing had, then wanted, then nothing again just adds three records, and the newest one wins. Nothing gets deleted, so nothing can be deleted by someone else either.
Slow images
Just before I posted it, it felt slow. Load the site, drag, and you waited for the picture. I opened a new thread and asked.
look at devices. the images are a bit slow to load when the site loads - how can we make it instant or feel it? its noticeable if i load the site and scroll and have to wait
It came back with a list of reasons and fixes. I said do it and test it, show me a preview so I can see the dimming, then redeploy. Now the last device stays on screen, dimmed, until the next one arrives, and the second visit is instant.
Leaderboard
Another session. I wanted a leaderboard of the most had and most wanted, and I wanted to preview it before it went anywhere. Three directions, then a round on the one I liked, then ship it.
Video
create a video demo, use a luna subagent to do it. scrub through the timeline relatively quickly but pause on some devices throughout. video should be no longer than 10 seconds long.
The first one came back with a cursor that didn’t move. One line fixed that.
Sounds
I wondered if each device could make its noise when you tap it. The Game Boy start-up chime, the Canon AE-1 shutter, the Speak & Spell voice.
see if we can do a good job of the sounds - originals. so clicking the device would make the noise. dont publish to the live site yet tho.
Subagents searched all 87 and found nineteen recordings I could trust. I was hitting usage limits by then, so I left it there. It’s in a folder, not on the site.
Counts
After the leaderboard went live the counts stopped updating. I asked what was going on, and how this would cope if a lot of people voted.
i am seeing "Counts unavailable. Retrying…" - so what can we do about the counts then? if 100k people voted how would that break the site and what could we do about it?
The answer was long. So:
explain like I'm someone who knows nothing about this topic, using a HTML artifact with big pictures and few words. explain the current situation and what you propose we do about it.
My own testing had used up the read limit, and there’s a wall at 25,000 votes. So I said do it: a higher limit, fewer checks, and the totals kept in your browser between visits. It’s fine now, and when enough people vote that it isn’t, part two is a tally board.
Notes
- It started as a grid of fifty Astra images. Then I saw a button timeline and merged the two.
- Three layouts. I picked C and made it scrubbable, with real dates.
- Subagents found devices up to today, and every vague one got a real model and a new image.
- Had and wanted buttons, a page of your own, then onto bentossell.com/devices.
- After that, one session per thing: slow images, a leaderboard, a video, sounds, counts.
- I stopped the sounds at usage limits. When the counts answer was long, I asked for pictures.