Solo design & build
MANTOM 2.0
3D Cinematic Product Homepage
An Apple-style, scroll-driven 3D homepage for a premium German football brand, where a single WebGL hero ball persists across every section and the scroll itself drives the narrative.
Key metrics
- 3D models + textures
- < 4 MB
- JS gzipped
- < 400 KB
- persistent WebGL canvas
- 1
What it does
- Architected a single persistent WebGL <Canvas> fixed behind scrollable DOM sections, syncing the 3D camera and DOM animations through one shared GSAP + Lenis ticker.
- Built a scroll-driven “Anatomy of a Perfect Ball” exploded view that maps scroll progress to 3D layer offsets in real time.
- Performance-budgeted throughout: models and textures under 4 MB, JS under 400 KB gzipped, adaptive DPR capping, and a prefers-reduced-motion static fallback.
- Full German-language UI with the legally required Impressum, Datenschutz and AGB footer links (§5 TMG + DSGVO compliance).
Stack
- Next.js
- React Three Fiber
- GSAP
- Lenis
- Zustand
- Tailwind CSS
- TypeScript
- Vercel