💻 MacBook Pro – Scroll-Driven 3D Experience
A cinematic Apple-style MacBook Pro product experience built using React Three Fiber, Three.js, and GSAP-like scroll interactions. The project recreates a premium hardware reveal with smooth scroll-based animations, realistic lighting, and immersive 3D visuals — inspired by Apple’s official product pages.
✨ Features
🎥 Scroll-based 3D animation
MacBook lid smoothly opens & closes based on scroll position
🌍 Physically realistic lighting
HDRI environment lighting using PolyHaven EXR maps
🧠 Optimized Three.js scene
Efficient mesh traversal & material control
🧩 Modular architecture
Clean separation of UI, Canvas, and 3D logic
⚡ Smooth interpolation
Frame-based animation using useFrame + MathUtils.lerp
| Technology | Usage |
|---|---|
| React | UI & component architecture |
| @react-three/fiber | React renderer for Three.js |
| @react-three/drei | Helpers (ScrollControls, Environment, GLTF loader) |
| Three.js | 3D rendering & math utilities |
| Tailwind CSS | Typography & layout styling |
| HDRI (EXR) | Studio-grade lighting |