Orbit
A 3D product launch page. Scroll to take the headphones apart, click to change colour and material in real time.
- Next.js
- TypeScript
- React Three Fiber
- three.js
- GSAP ScrollTrigger
- GLSL
Summary
A launch page for fictional headphones: a scroll-driven 3D story with an exploded view and a custom shader, plus a live configurator. It stays smooth on phones.
Key decisions
- One fixed WebGL canvas behind the DOM, driven by a GSAP scroll timeline that writes to refs, not React state.
- An asset pipeline (Draco + compressed textures) to fit a strict size budget.
- Adaptive quality tiers and a static image fallback for low-end devices and reduced motion.