A watch page is a photo of a watch at ten past ten. I wanted one that is a watch: the hands set to the time where you are, the seconds hand stepping like the real movement does, and the scroll winding it. Scroll far enough and the dial clears from the centre out, so you are looking at the gears underneath. Wind it at avivashishta.com/lab/watch.
The short version: Codex makes the watch with no hands on it, then three edits: a skeleton dial, a steel bracelet and a green dial. A script cuts them out and pastes the bracelet onto the edits that don't have it, so every combination exists. The page draws the hands in SVG over the photo, and the scroll adds hours to the real time while a circular clip opens the skeleton photo over the dial.
Step 1: a watch with no hands (Codex)
The trick is in one line of the prompt: no hands at all. A photo with hands would always be at one time; a bare dial can be any time.
A luxury men's mechanical wristwatch photographed perfectly straight-on from the front, the round dial exactly centered and filling the middle of the frame, the strap running straight up and down out of frame. Polished and brushed steel case, a clean silvery-white dial with slim applied steel hour markers and a fine minute track, a small seconds sub-dial above six o'clock, NO HANDS AT ALL on the main dial or the sub-dial (the dial is bare, only the centre pinion), a black alligator leather strap, the crown at three o'clock. Pure seamless white background (#FFFFFF), soft studio light, photoreal, crisp. No text, no numerals, no logos, no brand name. Square 1:1, 1024x1024.
Then three edits of that photo, each changing one thing: the dial cut away to the movement ("still NO HANDS"), a steel bracelet instead of leather, and a forest green dial.
Step 2: the combinations Codex didn't draw
Two dials, two straps and a skeleton make six pictures, and Codex drew four. The prep script finds the strap by comparing the bracelet photo with the first one outside the case, and pastes that region onto the green dial and onto the skeleton. Because every edit kept the watch in the same place, the bracelet drops on exactly.
bun scripts/prepare-watch.mjs ./raw
Step 3: the hands
The hands are an SVG laid exactly over the photo, in the photo's own coordinates: the dial's centre and radius were measured once. They are dauphine hands, each a long thin diamond filled with a steel gradient that is light on one side of the ridge and dark on the other, so they look faceted. The seconds hand on the small dial is the one bit of blue.
// A 4 Hz movement: the seconds hand steps eight times a second.
const sec = now.getSeconds() + Math.floor(now.getMilliseconds() / 125) / 8;
const t = now.getHours() * 3600 + now.getMinutes() * 60 + sec + extra;
hour.setAttribute("transform", `rotate(${((t / 3600) % 12) * 30})`);
Cheap watches tick once a second and a quartz sweep is perfectly smooth. A mechanical watch at 28,800 beats an hour moves its seconds hand in eight small steps a second, and that stutter is what watch people look for.
Step 4: the scroll is time
The page is three and a half screens of scroll over one fixed screen. All the way down is twelve hours, added to the real time and eased, so a flick makes the hands whirl and settle. The headline reads the time the hands show.
Over the middle of the scroll, the skeleton photo, laid exactly over the dial, is revealed with a growing circle from the dial's centre:
skel.style.clipPath = `circle(${k * 75}% at ${cx * 100}% ${cy * 100}%)`;
So the dial seems to melt away from the hands outwards, and the hands keep turning over the gears.
The small things
- A loupe follows the pointer over the watch: a circle showing the same photo at four times, which is the only way to see the finishing on the bridges.
- Dial and strap buttons swap the photo; the price follows the strap.
- Specs that matter to watch people: 28,800 vph, 70 hours of reserve, 100 m.
Build your own
Build a scroll-driven watch page (React, SVG, no libraries). Assets: square cut-out photos of a watch with a bare dial (no hands) in each dial and strap option, the same watch with a skeleton dial, and the dial's centre and radius and the small seconds dial's centre and radius as fractions of the photo. In a fixed full screen, show the photo with an SVG over it in the photo's coordinates drawing faceted hour and minute hands (a thin diamond with a two-tone steel gradient) and a small seconds hand.
Each frame, set the hands to the real time plus extra seconds eased toward scroll progress times 12 hours; step the seconds hand in eighths of a second. Lay the skeleton photo on top, clipped to a circle at the dial's centre whose radius grows with scroll through the middle of the page. Show the time in the headline, a loupe that magnifies the photo 4x under the pointer, dial and strap options, specs and Add to bag.