Build a scroll-driven 3D product page for a dive watch

the prompt

Build the product page for a mechanical dive watch — a single scrolling page whose centerpiece is a real-time 3D model of the watch that assembles, explodes, and is annotated as the visitor scrolls. Context you should know: this is going into a video watched by a large audience, your page is shown on camera against two other frontier models, and your work will be credited to you by name. Every model gets this identical prompt, including the same product. What's being judged is taste, motion choreography, and craft. The product: a mechanical dive watch. You name it, position it, and write its copy. Invent the brand. The components you must model and be able to separate are the case, the rotating bezel, the crystal, the dial, the hands, the automatic movement, the winding rotor, the caseback, and the strap or bracelet. Requirements: 1. **A real-time 3D watch, built in code.** No imported model files, no hotlinked assets — the geometry is authored procedurally or in code. It needs to read as a watch: correct proportions, brushed and polished metal that respond to light differently, a crystal with depth, applied indices, lume, a legible dial. Physically-based materials, real lighting, an environment that gives the metal something to reflect. 2. **Scroll drives everything.** The page is one continuous choreographed sequence — the watch rotates, opens, explodes into its components, isolates individual parts, and reassembles, all bound to scroll position. Scrubbing backward runs it cleanly in reverse. The motion is authored and eased, not linear and mechanical. Getting the *timing* right is most of the grade here. 3. **A wireframe-to-solid transition** somewhere in the sequence, where the watch reads as engineering drawing and resolves into the finished object. 4. **Hotspot callouts on the exploded components.** As each part separates, a labeled annotation appears anchored to it, with a line of copy explaining what it does. They enter and leave with the choreography rather than popping. 5. **A complete page, not just the 3D showcase.** A hero, the scroll sequence, a technical specification table (movement, power reserve, water resistance, case dimensions, crystal, lume, strap), a section on materials and finishing, and a purchase call to action with price and configuration options. The writing matters — this should read like a brand with a point of view, not placeholder copy. 6. **Typography and layout carry the brand.** Deliberate type scale, real hierarchy, generous and confident spacing. This is a luxury object; the page should feel like one. Avoid the default AI-website look — the centered hero, the three feature cards, the gradient blob, the same three fonts. 7. **Sixty frames per second while scrolling**, on a normal laptop. A 3D scroll page that stutters is worse than one that doesn't exist. Profile it and fix it. 8. **Responsive.** It has to work and stay beautiful down to a phone. The scroll choreography adapts rather than breaking. 9. **Single self-contained `index.html`.** Any library via CDN — three.js, GSAP, Lenis, whatever you want. No build step, no server, no API keys, no hotlinked images or fonts (use system or CDN-loaded webfonts, and generate any imagery in code). You have free reign to look up what libraries exist and how to use them. 10. **QA it by using it.** Scroll the whole page top to bottom and back up several times at different speeds. Confirm the sequence scrubs cleanly in both directions, nothing desyncs or jumps, callouts anchor to the right parts, the frame rate holds, and the mobile layout is genuinely good rather than merely functional. Fix what breaks. Work completely autonomously. Do not ask for anything until it's finished. DONE when: the scroll sequence is choreographed and holds sixty frames per second in both directions, the watch reads as a real product rather than a 3D exercise, and the page would be credible as a real brand's site.

…