Scroll 3D Product Site
A complete product website where scroll turns, opens and takes apart a live 3D model, with every video and image rendered from that model, in one offline file.
Build a complete scroll-driven product website around a real-time three.js model, delivered as one offline HTML file. Scroll turns the product over, moves in close and takes it apart in a pinned 3D section, and every video and image on the page is rendered from the same model, so no stock footage is needed. Motion, the 3D scene and the media are separate modules, and local scripts render the media, build the single file, check it on desktop and phone and record a scroll film.
How it works
Fix the product, the model and the scroll poses of the 3D section
Start from the bundled template and change the scene3d, copy, motion and media modules
Render the media from the model, build the single file and run the desktop and phone check
Frequently asked questions
Does it need a model key or paid calls?
No. Everything runs locally: three.js renders the model, ffmpeg encodes the media and Chrome runs the check. It needs Node.js 22.4+, Chrome and ffmpeg with libx264.
Can I use my own product model?
Yes. The template's object is a placeholder: you describe your product and the Agent builds it in code, replacing scene3d/model.js and scene3d/facts.js while keeping the same createModel interface, then writes the scroll poses, the named beats, the copy and the media shots for it. Moving parts are driven from the facts module, and the check fails on parts passing through each other and on linked parts coming apart. Loading a GLB or GLTF file is not part of the template and has not been tested: the single file runs with no network, so the model has to be embedded and parsed in the page, and it needs one node per part to come apart. The Skill notes what that would take.
Why one HTML file?
The page has to open with no network and no storage, as in the Lab preview. build-single.mjs inlines the CSS, fonts, scripts and every video into one file and fails above 5 MiB. The two examples are 4.5 and 4.7 MiB.
What happens on phones and with reduced motion?
Phones get a lighter 3D tier (no ambient occlusion, a smaller shadow map). With prefers-reduced-motion the intro is skipped, videos show their posters and the 3D section becomes a still of the exploded view.
Are the brands in the examples real?
No. Valmoret (a watch atelier) and Corvane (an engine maker) are fictional, and both models are illustrations, not engineering data. Valmoret is the template's own placeholder. Corvane was a separate run: an Agent given only the Skill package and a one-paragraph brief built the engine site, and it then went through seven rounds of review and fixes against geometry probes, the last one done by the reviewer.