10. Mechanical Watch Simulator

# 10. Mechanical Watch Simulator

Build a 3D mechanical watch movement simulator. The page opens and immediately begins running: the balance wheel oscillates, the escapement ticks, the gear train turns, and the hands advance, all at horologically correct speeds. The viewer can orbit the open movement and watch every component do its job, then switch between famous calibers to compare how differently they solve the same problem.

The point is mechanical legibility: a viewer who knows nothing about watches should be able to see power flow from the mainspring to the hands and understand what each part does.

## What to Make

A full-screen 3D scene rendered into a <canvas>. The subject is a single watch movement, presented like an engineering cutaway on a drafting table: mainplate, bridges, and dial-side hands all visible, with the movement running on load. No start screen, no landing page. The simulation begins immediately.

The camera starts in a slow automatic orbit showing the whole movement, then settles to a three-quarter view. The user can take over at any time:

- **Drag**: orbit the camera
- **Scroll / pinch**: zoom from full movement down to the escapement
- The auto-orbit resumes after 8 seconds of no interaction

## Movement Library

Include at least these four calibers, switchable at runtime. Each must differ in ways that are visible in the simulation, not just in a spec sheet:

1. **ETA 2824-2** - The Swiss workhorse. Swiss lever escapement, 28,800 vph (4 Hz, 8 beats/second), 38-hour power reserve, full-size central winding rotor.
2. **Omega Co-Axial 8900** - Co-axial escapement with a three-level escape wheel and tangential impulse, visibly different pallet geometry from the Swiss lever. 25,200 vph (3.5 Hz), free-sprung balance, 60-hour reserve.
3. **Zenith El Primero 400** - High-beat 36,000 vph (5 Hz, 10 beats/second) integrated chronograph. The chronograph seconds wheel, column wheel, and coupling clutch must be visible and engage/disengage when the chronograph is started and stopped.
4. **Seiko Spring Drive 9R65** - No escapement at all: a glide wheel spins continuously in one direction under electromagnetic braking, and the seconds hand sweeps perfectly smoothly with no ticking. 72-hour reserve. This is the contrast piece: same energy source, completely different regulation.

Switching movements rebuilds the scene (or swaps the assembly) without a page reload and keeps the camera position.

## Mechanical Simulation Requirements

Every movement must show these parts working, with correct relative speeds:

- **Mainspring barrel**: visibly rotating, slowly unwinding. Power reserve drains over simulated time.
- **Going train**: center wheel at exactly 1 revolution per hour, third wheel, and fourth wheel at exactly 1 revolution per minute driving the seconds display.
- **Escape wheel**: advances by half a tooth pitch per beat at the movement's true beat rate, with a visible lock-and-release snap, not smooth rotation (except Spring Drive, whose glide wheel never stops).
- **Pallet fork**: rocks between two banking positions, alternating tick and tock, impulse faces engaging the escape teeth.
- **Balance wheel and hairspring**: oscillates at the movement's true frequency with roughly 270-310 degrees of amplitude; the hairspring coil visibly breathes (expands and contracts) each cycle.
- **Motion works and hands**: cannon pinion, minute wheel, and hour wheel drive the hour and minute hands at a correct 12:1 ratio; a running seconds hand at 1 rpm.
- **Automatic winding**: oscillating rotor swings and winds the barrel when the movement is shaken (see Controls).
- **Jewel bearings**: small red jewel donuts at each pivot point.

Slow motion must preserve correct kinematics: at 1/50x speed a viewer must be able to watch a single escape tooth lock, impulse, and release.

## Views

- **Assembled view** (default): bridges and rotor in place, movement running.
- **X-ray view**: bridges and dial go translucent so the full train is visible while running. Jewel bearings and the escapement are highlighted.
- **Exploded view**: components separate along the vertical axis into a labeled stack, still animating in place, so each layer can be read top to bottom.
- **Escapement inspection**: one click (or key) flies the camera to a close-up of the escapement and drops the simulation to slow motion automatically.

In every view, hovering or tapping a part shows its name and one-sentence function (for example: "Pallet fork - alternately locks and releases the escape wheel, dividing power into equal beats").

## Controls

The scene runs automatically, but include:

- **Space**: pause or resume
- **Arrow Left / Arrow Right**: previous or next movement
- **1-4**: jump directly to a movement
- **+ / -**: simulation speed from 1/50x to 60x
- **X**: toggle X-ray
- **E**: toggle exploded view
- **C**: escapement close-up (toggles back)
- **G**: shake the watch to spin the rotor and add reserve
- **T**: start/stop the chronograph (El Primero only)

Do not require controls to enjoy the page. It must look alive and impressive immediately on load.

## Always-Visible HUD

Monospaced, uppercase, hairline-bordered readouts in the screen corners:

- **Top-left**: caliber name, vph, power reserve remaining, escapement type
- **Top-right**: camera hints ("drag orbit - scroll zoom")
- **Bottom-left**: beat count, simulation phase, balance amplitude
- **Bottom-right**: simulation speed, FPS

A small controls hint sits bottom-center and fades after 6 seconds.

## Visual Rules

- Full-screen 3D, technical drafting aesthetic: light off-white ground plane with a fine grid, hairline outlines on parts, soft shadows, one restrained accent color used only for the escapement, jewels, and HUD highlights
- Parts must be modeled geometry (gears with real tooth profiles, screwed bridges, skeletonized rotor), not flat textures of gears
- Brass, steel, and blued-screw material contrast so the train reads at a glance
- No external textures fetched at runtime; procedural or locally shipped assets only
- Text, HUD, and labels must not overlap the movement or each other at any supported viewport

## Hard Requirements

- Single index.html
- No build step
- WebGL via Three.js, Babylon.js, regl, or raw WebGL2
- Any CDN libraries must be listed in manifest.json.externalAssets
- Smooth at 30fps on a 2020 laptop at 1280x800
- Keyboard accessible
- lang="en" on <html>
- Honor prefers-reduced-motion:
  - Disable the automatic camera orbit (static three-quarter view instead)
  - Start the simulation paused with an obvious play control
  - Keep all manual controls functional

## Loop / Validation Rule

Do not stop until you have personally verified each of these in a browser:

1. The page loads directly into a running movement with no start screen and no console errors.
2. The fourth wheel completes one revolution per simulated minute and the center wheel one per simulated hour.
3. The balance wheel beat rate matches the selected caliber (time 10 seconds of beats at 1x).
4. At 1/50x, a single escape tooth visibly locks, impulses, and releases on the ETA 2824-2.
5. Switching to Spring Drive shows a continuously turning glide wheel and a perfectly smooth seconds sweep, with no ticking.
6. X-ray and exploded views reveal the full train while it keeps running.
7. All four movements load, keep their correct specs in the HUD, and the camera survives the switch.
8. The El Primero chronograph starts, stops, and resets with visible clutch and column-wheel action.

If any check fails, fix the specific broken mechanism and re-run all eight checks.