Build a scroll-driven 3D product page for a mechanical keyboard

the prompt

Build the product page for a high-end mechanical keyboard — a single scrolling page whose centerpiece is a real-time 3D model of the board that assembles, explodes, and is annotated as the visitor scrolls, and that responds when the visitor types. 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 premium 75% mechanical keyboard. 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 (top and bottom), the weight, the plate, the PCB, the sound-damping foam, the stabilizers, the switches, and the keycaps. Requirements: 1. **A real-time 3D keyboard, built in code.** No imported model files, no hotlinked assets — the geometry is authored procedurally or in code. It needs to read as a real board: correct key spacing and row profiles, sculpted keycaps with proper top surfaces, legible legends, an anodized or PVD case with believable edge chamfers, and metal that responds to light differently from the plastic next to it. Physically-based materials, real lighting, an environment the case has something to reflect. 2. **Scroll drives everything.** The page is one continuous choreographed sequence — the board rotates, the case opens, the stack separates into its layers, individual components isolate, and everything 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 single switch, isolated and cut away.** Somewhere in the sequence, one switch separates from the board and opens up — housing, stem, spring, contact leaf — and actuates on a loop so the travel is visible. This is the detail that separates a real understanding of the product from a pretty render. 4. **It has to respond to typing.** The visitor types on their own physical keyboard and the corresponding 3D keycaps depress and rebound with real weight and real travel distance. Key-up cannot be the mirror of key-down — a switch rebounds faster than it depresses. Handle held keys, fast repeats, and multiple keys at once without the animation desyncing or queueing. 5. **A wireframe-to-solid transition** somewhere in the sequence, where the board reads as engineering drawing and resolves into the finished object. 6. **Hotspot callouts on the exploded components.** As each layer separates, a labeled annotation appears anchored to it with a line of copy explaining what it does and why it matters to how the board sounds or feels. They enter and leave with the choreography rather than popping. 7. **A complete page, not just the 3D showcase.** A hero, the scroll sequence, a technical specification table (layout, switch type and actuation force, mount style, case material, plate material, keycap profile and material, connectivity, polling rate), a section on materials and finishing, a section on sound with some visual treatment of the typing acoustics, 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. 8. **Typography and layout carry the brand.** Deliberate type scale, real hierarchy, generous and confident spacing. This is an enthusiast object sold on craft; 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. Avoid the default mechanical-keyboard-site look too: pure black background and RGB underglow is the cliché of this exact category, and a large audience has seen it hundreds of times. 9. **Sixty frames per second while scrolling**, on a normal laptop, with the full board and all keycaps on screen. A 3D scroll page that stutters is worse than one that doesn't exist. Profile it and fix it. 10. **Responsive.** It has to work and stay beautiful down to a phone. The scroll choreography adapts rather than breaking, and the typing interaction degrades gracefully where there's no physical keyboard. 11. **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. 12. **QA it by using it.** Scroll the whole page top to bottom and back up several times at different speeds. Type on it — single keys, held keys, fast bursts, chords. Confirm the sequence scrubs cleanly in both directions, nothing desyncs or jumps, callouts anchor to the right parts, the switch cutaway actuates correctly, 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, typing on a real keyboard drives the 3D board convincingly, the switch cutaway shows real travel, and the page would be credible as a real brand's site.

…