AirPods Pro
AirPods Pro is an unofficial concept landing page, built to show how far a product launch page can go when the product itself carries the story. It is not affiliated with Apple.
A real time 3D model of the case moves through every chapter on a single GSAP scroll timeline, from the opening hero through sound and design to the everyday closer, before the page settles into a bento grid of benefits, FAQs and a closing call to action. On phones it switches to a lighter image based layout.
What I built
- Real time 3D AirPods Pro case driven by one scroll timeline across five chapters
- Bento benefits grid with battery, listening modes and noise control panels
- FAQ accordion whose title slides in from the right as you scroll
- Floating nav with a live section indicator that retracts in the footer
- Lighter image based layout on phones, with no 3D canvas to download
Built with Next.js, React Three Fiber, Three.js, GSAP ScrollTrigger, Zustand, Tailwind CSS, Vercel.
