Scroll-Driven Self-Disassembling Watch In WebGPU

You are an expert graphics programmer specializing in WebGPU and procedural 3D geometry. Build **"Time, Undone."** — a single, self-contained HTML file that renders a fully functional mechanical watch in 3D using WebGPU and WGSL shaders. The watch must animate realistically (ticking hands, rotating gears) and **disassemble itself as the user scrolls**, with components floating apart to reveal the inner mechanism, all while continuing to run.

## Core Requirements

**Architecture**
- Single HTML file with embedded `<style>` and `<script>` tags
- Pure WebGPU API; no Three.js, Babylon.js, or other 3D libraries
- All geometry (gears, hands, case, jewels, escapement) generated procedurally in JavaScript
- WGSL shaders for vertex transformation and fragment shading

**Mechanical Accuracy**
- Generate at least 8–12 recognizable watch components: balance wheel, escapement, mainspring barrel, gear train (multiple gears with correct tooth counts), hour/minute/second hands, watch case, crystal
- Gears must rotate at mechanically plausible ratios (e.g., second hand drives escapement at 1:1, minute hand at 1:60 relationship)
- Balance wheel oscillates; escapement visibly "ticks"

**Scroll-Driven Disassembly**
- Map `window.scrollY` to an explosion factor (0 = assembled, 1 = fully apart)
- Each component translates outward along its logical assembly axis while rotating slightly for dramatic effect
- Intermediate scroll positions show partial disassembly; components remain visible and animating throughout
- Smooth interpolation; no jumps or glitches

**Visual Quality**
- Perspective camera with orbiting or fixed 3/4 view
- Metallic materials: use simple Blinn-Phong or PBR-lite shading in WGSL (diffuse + specular + ambient)
- Distinct materials: brass gears (gold), steel case (silver/grey), rubies for jewels (deep red), glass crystal (transparency or bright highlight)
- Directional light + subtle ambient; consider a second rim light for depth

## Technical Constraints

- **WebGPU fallback**: Display a clear error message if `navigator.gpu` is unavailable, with a link to browser compatibility info
- **Geometry generation**: Write functions that return vertex/index buffers for primitives (cylinder for arbors, toothed-wheel for gears, thin box for hands). Reuse and transform these to build all components.
- **Render loop**: `requestAnimationFrame` drives both time-based animation (hand rotation, balance wheel) and reads scroll position each frame
- **Buffer management**: Create one vertex buffer per component or use instancing; store transformation matrices in uniform buffers
- **WGSL shaders**: Vertex shader applies model-view-projection + explosion offset; fragment shader computes lighting per-pixel

## Deliverables

1. **HTML structure**: `<!DOCTYPE html>`, `<canvas>` fullscreen or centered, scroll container tall enough to demonstrate full disassembly (e.g., `<div style="height: 300vh;">`)
2. **Embedded CSS**: Style the canvas, body background (dark to contrast metal), and fallback message
3. **Embedded JavaScript**:
   - WebGPU device/context initialization
   - Procedural geometry generators (gear teeth via polar equations, cylinders via triangle strips)
   - Component definitions: position, rotation axis, gear ratio, color
   - Uniform buffer for VP matrix and per-component model matrix + explosion offset
   - WGSL vertex and fragment shader source strings
   - Render loop reading `Date.now()` for animation time and `scrollY` for disassembly
4. **Code comments**: Brief notes explaining gear ratios, explosion math, and shader bindings

## Aesthetic Details

{{aesthetic-details}}

## Success Criteria

- File opens in a WebGPU-enabled browser (Chrome/Edge 113+, behind flag in Firefox) and immediately shows an assembled, ticking watch
- Scrolling smoothly pulls the watch apart; scrolling back re-assembles it
- All moving parts remain animated during disassembly
- No console errors; graceful degradation message if WebGPU missing
- Code is readable, with clear separation between geometry generation, GPU setup, and render loop

Output the complete HTML file, ready to save and open in a browser.