Build a 3D Ecommerce Landing Page with Next.js, GSAP, Three.js and Prismic
Fizzi is a fictional soda brand I designed in Figma and built into a scroll-driven 3D landing page. A Three.js soda can floats, tilts, and dives in response to scroll, with GSAP Timelines coordinating can motion, bubble particles, and text reveals. Animations stay in sync through Zustand, so the 3D scene and 2D UI feel like one experience instead of two layers fighting each other.
The course spends real time on the less glamorous, more useful problems: adapting the 3D scene for mobile, measuring and improving 3D performance, designing a loading screen that masks model boot, and deciding what to animate versus what to hold still. The Figma design and final repository are both public so students can compare their build against a real reference.