Overview
A cinematic scroll-driven 3D product page — a fixed 3D model glides through seven camera scenes (hero, design, earcup, band, spin, reveal, final) with callout dots and a light/dark finale, built on Three.js + GSAP ScrollTrigger + Lenis. Full source code — swap in your own product model and words and it's yours.
Cinematic scroll-driven 3D product page for a statement product.
Limitations
Demo headphones model is third-party (CC BY 4.0, by ILYAsquared via Sketchfab) — its credit must stay in the footer while you use it; swap in your own model to remove it.
Libraries and fonts load from public CDNs — internet required.
Showcase page only — no cart, checkout or backend.
Specifications
- Technology
- HTML · CSS · JavaScript · Three.js · GSAP · Lenis
- Included files
Complete source code (index.html, model.glb, README, license + third-party notices)- License
- Single-site — Read terms
Product FAQ.
No — Orrery Aether is a fictional demo brand (steampunk headphones) showing what the template can do. Swap in your own product model and words.
The complete single-page site: index.html, the demo 3D model (model.glb), a README with model-swap and camera-retune steps, license + third-party notices.
Yes — export your product as .glb, point CONFIG.model at it, and retune the camera scenes with the console tool (steps in the README). The demo model credit comes off once you replace it.
Keep exploring
