overview
Mac-Land: An Apple-Style 3D MacBook Product Site
Role: Solo design + development · Type:Frontend / WebGL showcase
TL;DR
A scroll-driven product page in the style of Apple's MacBook site. A real 3D MacBook renders in the browser, reacts to scroll, and sits inside a smooth, cinematic layout. Built to answer one question: can a 3D hero feel premium on the open web without wrecking performance?
The goal was to recreate that feel, not copy pixels, and to make it hold up on real devices.
Approach
1. Treat the 3D model as a UI component.
The MacBook is rendered with React Three Fiber and Drei, so the scene lives inside the React tree. Model, lights, and camera are components, not a separate imperative canvas bolted onto the page.
2. Drive motion from scroll, not timers.
GSAP (with `@gsap/react`) handles scroll-linked timelines for text reveals and model transforms. Lenis smooths the scroll itself, so animation progress tracks the user's input without jitter.
3. Keep shared state small and explicit.