Build "Time, Undone." - a single self-contained HTML file (embedded JS and CSS) running a genuine WebGPU + WGSL interactive 3D mechanical watch that takes itself apart as you scroll, while it keeps running. No 3D engine libraries; all geometry is generated in code. This is issue No. 01 of a series about objects everyone has seen from the outside and almost no one has seen from the inside. THE OBJECT An original, unbranded, hand-wound mechanical watch in a round 40 mm case, with a classic Swiss-lever movement about 30 mm across. Layout: centre hours and minutes; small seconds sub-dial at 6 o'clock; crown at 3 o'clock. Dial: silver-opaline with a fine guilloché sunburst, applied polished indices, dauphine hands, a railroad minute track. Case: front sapphire crystal and a display caseback, so the movement is visible from behind. No brand names, logos or real calibre names anywhere. Call it "Calibre 01". THE MECHANISM (must be internally correct, not decorative) Beat rate 28,800 vph (4 Hz balance). Build a real going train with consistent tooth counts:mainspring barrel 96 teeth -> centre pinion 12; the centre wheel turns once an hour and carries the minute hand; centre wheel 80 -> third pinion 10; third wheel 75 -> fourth pinion 10; the fourth wheel turns once a minute and carries the small seconds hand; fourth wheel 84 -> escape pinion 7; escape wheel 20 teeth, turning once every 5 s. Motion works under the dial: cannon pinion 12 -> minute wheel 36; minute pinion 10 -> hour wheel 40 (12:1). Keyless works: crown, stem, crown wheel, ratchet wheel, click with spring. Escapement: escape wheel, pallet fork with two ruby pallet stones and banking pins, balance wheel with hairspring and impulse roller. Structure: mainplate, barrel bridge, train bridge, balance cock, ruby jewel bearings, blued screws. Gears: watch-style cycloidal tooth profiles, spoked wheel crossings, pinions with leaves, arbors and pivots. Centre distances are derived from a common module so every pair meshes visibly correctly when assembled. Motion, driven from ONE master clock:the balance oscillates as θ(t) = A·sin(2π·4·t), with amplitude A around 270° at full power; at each beat, the pallet fork flicks between its banking pins and the escape wheel advances half a tooth in a short eased impulse, then locks; every other wheel steps exactly by its ratio from the escape wheel; the seconds hand ticks 8 times per second; the minute and hour hands follow the train. On load, set the hands to the viewer's local time. Power: a power reserve of about 44 h that drains in real time.Amplitude falls from 290° to 180° as the reserve empties; at 0 the watch stops, the balance settling rather than freezing. Winding raises the reserve, with visible ratchet and click motion and a soft click sound (Web Audio, muted until the first user interaction). The mechanism keeps running in every exploded state: wheels spin in mid-air, the balance keeps beating, the seconds hand keeps ticking. THE EXPLODE (scroll-driven, with stops) Page scroll maps to a progress value from 0 to 1, split into seven chapters. Each chapter eases into a resting "stop" where scroll briefly settles (a soft snap, never a hard lock). The camera moves smoothly between chapters. Chapters: I. The case: front 3/4 view, assembled. II. The dial: the crystal and bezel lift away; the hands and dial rise. III. Motion works: the wheels under the dial separate. IV. The bridges: the watch turns over to show the back; the caseback lifts; the bridges and the balance cock rise, with their screws floating just above their holes. V. The going train: barrel, centre, third and fourth wheels spread upward along their own axes like a technical drawing. VI. The escapement: escape wheel, pallet fork and balance separate a little further, and the camera closes in. VII. The heart: a macro view of the beating balance and hairspring, with the full exploded column behind. Every part moves along a clear axis, mostly its own arbor axis or straight up from the plate. Parts that belong together stay together. Nothing intersects during the explode, and nothing leaves the frame. Thin hairline leader lines with small caps labels appear for the main parts at each stop, and fade between stops. INTERACTION Scroll (wheel, trackpad, touch swipe) drives the explode. Dragging on empty space turns the watch within limits; it eases back when released. Hovering a part outlines it softly with its name. Clicking a part:the part is highlighted, other parts dim to about 35%, and the camera eases to frame it; a card opens beside it, joined by a hairline leader. The card shows: name; role in one or two plain sentences; one precise fact (for example: "Escape wheel · 20 teeth · one turn every 5 s"); and one live value (current speed, angle, or beats so far). Esc, a close button, or clicking empty space returns. Dragging the crown sideways winds the watch (a tactile ratchet), when the crown is visible. Pointer capture, mouse and touch. Picking by an obje…
Build "Time, Undone." - a single self-contained HTML file (embedded JS and CSS) running a genuine WebGPU + WGSL interactive 3D mechanical watch that takes itself apart as you scroll, while it keeps running. No 3D engine libraries; all geometry is generated in code. This is issue No. 01 of a series about objects everyone has seen from the outside and almost no one has seen from the inside.
THE OBJECT
An original, unbranded, hand-wound mechanical watch in a round 40 mm case, with a classic Swiss-lever movement about 30 mm across.
Layout: centre hours and minutes; small seconds sub-dial at 6 o'clock; crown at 3 o'clock.
Dial: silver-opaline with a fine guilloché sunburst, applied polished indices, dauphine hands, a railroad minute track.
Case: front sapphire crystal and a display caseback, so the movement is visible from behind.
No brand names, logos or real calibre names anywhere. Call it "Calibre 01".
THE MECHANISM (must be internally correct, not decorative)
Beat rate 28,800 vph (4 Hz balance).
Build a real going train with consistent tooth counts:mainspring barrel 96 teeth → centre pinion 12; the centre wheel turns once an hour and carries the minute hand;
centre wheel 80 → third pinion 10;
third wheel 75 → fourth pinion 10; the fourth wheel turns once a minute and carries the small seconds hand;
fourth wheel 84 → escape pinion 7;
escape wheel 20 teeth, turning once every 5 s.
Motion works under the dial: cannon pinion 12 → minute wheel 36; minute pinion 10 → hour wheel 40 (12:1).
Keyless works: crown, stem, crown wheel, ratchet wheel, click with spring.
Escapement: escape wheel, pallet fork with two ruby pallet stones and banking pins, balance wheel with hairspring and impulse roller.
Structure: mainplate, barrel bridge, train bridge, balance cock, ruby jewel bearings, blued screws.
Gears: watch-style cycloidal tooth profiles, spoked wheel crossings, pinions with leaves, arbors and pivots. Centre distances are derived from a common module so every pair meshes visibly correctly when assembled.
Motion, driven from ONE master clock:the balance oscillates as ̸(t) = A·sin(2̸·4·t), with amplitude A around 270° at full power;
at each beat, the pallet fork flicks between its banking pins and the escape wheel advances half a tooth in a short eased impulse, then locks;
every other wheel steps exactly by its ratio from the escape wheel;
the seconds hand ticks 8 times per second; the minute and hour hands follow the train.
On load, set the hands to the viewer's local time.
Power: a power reserve of about 44 h that drains in real time.Amplitude falls from 290° to 180° as the reserve empties; at 0 the watch stops, the balance settling rather than freezing.
Winding raises the reserve, with visible ratchet and click motion and a soft click sound (Web Audio, muted until the first user interaction).
The mechanism keeps running in every exploded state: wheels spin in mid-air, the balance keeps beating, the seconds hand keeps ticking.
THE EXPLODE (scroll-driven, with stops)
Page scroll maps to a progress value from 0 to 1, split into seven chapters. Each chapter eases into a resting "stop" where scroll briefly settles (a soft snap, never a hard lock). The camera moves smoothly between chapters.
Chapters:
I. The case: front 3/4 view, assembled.
II. The dial: the crystal and bezel lift away; the hands and dial rise.
III. Motion works: the wheels under the dial separate.
IV. The bridges: the watch turns over to show the back; the caseback lifts; the bridges and the balance cock rise, with their screws floating just above their holes.
V. The going train: barrel, centre, third and fourth wheels spread upward along their own axes like a technical drawing.
VI. The escapement: escape wheel, pallet fork and balance separate a little further, and the camera closes in.
VII. The heart: a macro view of the beating balance and hairspring, with the full exploded column behind.
Every part moves along a clear axis, mostly its own arbor axis or straight up from the plate. Parts that belong together stay together. Nothing intersects during the explode, and nothing leaves the frame.
Thin hairline leader lines with small caps labels appear for the main parts at each stop, and fade between stops.
INTERACTION
Scroll (wheel, trackpad, touch swipe) drives the explode.
Dragging on empty space turns the watch within limits; it eases back when released.
Hovering a part outlines it softly with its name.
Clicking a part:the part is highlighted, other parts dim to about 35%, and the camera eases to frame it;
a card opens beside it, joined by a hairline leader. The card shows: name; role in one or two plain sentences; one precise fact (for example: "Escape wheel · 20 teeth · one turn every 5 s"); and one live value (current speed, angle, or beats so far).
Esc, a close button, or clicking empty space returns.
Dragging the crown sideways winds the watch (a tactile ratchet), when the crown is visible.
Pointe…