スクロールで分解される機械式腕時計、WebGPUの単一HTML

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 object-ID render pass or exact ray tests; no approximate bounding spheres.
RENDERING (real metals, macro-photography feel — not a cartoon)
Physically based materials, with a procedural studio environment (large softboxes, a strip light and a dim warm fill) for reflections.
Finishes:Côtes de Genève stripes on the bridges (anisotropic brushed specular aligned to the stripes);
perlage (circular graining) on the mainplate;
mirror-polished bevels (anglage) catching bright edge highlights;
thin-film heat-blued screws and hands;
ruby jewels that are translucent red with internal sparkle;
rhodium-plated steel parts;
sapphire crystals with faint blue-violet reflections and a slight edge thickness.

Case in the selected gold.
Highlights: controlled bloom on specular highlights only; small star glints on jewels and polished edges that appear as the light or the watch moves. Glamour, not glitter.
Soft contact shadows, gentle ambient occlusion, subtle depth of field that follows the focused part.
Filmic tonemap with no clipped highlights; 4x MSAA or equivalent.
Background: pale porcelain white with a soft vignette, like a seamless photo studio. Not yellow, not cream.
UI (aristocratic, editorial, generous whitespace)
Fonts: "Bodoni Moda" for display and numerals, "Jost" for UI text (Google Fonts, with serif and sans fallbacks). Small caps labels with 0.16em tracking; tabular numerals.
Colours:ink #1B1A17 on the porcelain background;
hairlines 1px at 15% ink;
the accent follows the selected gold.

No gradients on UI elements, no heavy shadows, no emoji.
Top-left:kicker "OBJECTS, OPENED / NO. 01";
large Bodoni heading on two lines, "Time," / "Undone.";
three caption lines in Bodoni italic: "Wound by hand." "Opened by scroll." "Nothing is hidden."

Top-right: status "WEBGPU · LIVE" with a small dot.
Left edge, vertically centred: the chapter index "I. The case", "II. The dial", "III. Motion works", "IV. The bridges", "V. The going train", "VI. The escapement", "VII. The heart".The current chapter is highlighted, with a hairline progress rule; clicking a chapter scrolls to it.

Right panel "THE MOVEMENT":three case presets: White gold, Yellow gold, Rose gold, with small metal swatches;
live readouts: Beat rate "28,800 vph", Power reserve (h, with a thin bar), Amplitude (°), Beats since opened;
buttons "Wind the crown" and "Set to local time";
checkboxes "¼ speed" and "Trace the power". Trace the power makes a slow line of light flow along the energy path: mainspring → barrel → centre → third → fourth → escape wheel → pallet fork → balance, with each part glowing as it passes;
a Pause/Resume button.

Bottom-left hint: "Scroll to take it apart. Click any part to meet it. Drag to turn it."
Bottom-right: a collapsible "How it works", with a short, accurate explanation of the going train, the escapement, the balance and the power reserve, plus a short note on how this page renders it.
Mobile: the canvas fills the top about 65% of the screen, and the chapter index becomes a horizontal row of Roman numerals. The panel flows below; part cards become a bottom sheet. Nothing covers the watch.
ENGINEERING
Build all geometry once at start-up. Instance repeated parts (screws, jewels, teeth where useful). Update only transforms per frame; no shader compilation or buffer rebuilds during interaction.
Animation time comes from one clock with ¼-speed scaling. Pause freezes the mechanism, not the UI.
Respect prefers-reduced-motion: instant chapter transitions, no camera flights, no glints animation.
If WebGPU is unavailable, show a clear, well-designed explanation. No fake fallback renderer.
Handle device loss. Cap the pixel ratio at 2. Aim for 60 fps on a laptop and a smooth experience on a recent phone.
VALIDATE BEFORE DELIVERING
In code, assert the train ratios: the seconds hand turns once per 60 s, the minute hand once per 3600 s, the hour hand once per 12 h, the escape wheel once per 5 s. Log the check to the console.
Every meshing pair is at the correct centre distance and visibly meshed when assembled.
No part intersects another at any explode progress; no z-fighting.
Scroll stops, chapter jumps, part picking, cards, winding, presets, trace-the-power, pause, ¼ speed and the mobile layout all work.
Card texts are horologically accurate.
No console errors.