A stunning 3D MacBook Pro clone built using React, React Three Fiber (R3F), and Tailwind CSS — featuring smooth scroll-triggered animations that simulate the laptop opening and closing based on scroll direction.
⚙️ Built for learning, crafted for style.
This project is a creative attempt to recreate a MacBook Pro using 3D modeling and web animation, powered by:
- Three.js through React-friendly wrapper (React Three Fiber)
- @react-three/drei for easy GLTF loading & scroll control
- Framer Motion / Tailwind CSS for UI enhancement
The laptop opens on scroll down and closes on scroll up, creating an immersive hardware-inspired experience on the web.
- 📦 3D MacBook Pro model (.glb)
- 🎯 Scroll-based animation: opens and closes with scroll
- ⚡ GPU-accelerated rendering
- 🎨 Tailwind CSS UI for clean layout
- 🧩 Component-based architecture with React
| Tool/Library | Role |
|---|---|
| React | UI library |
| React Three Fiber | Three.js renderer for React |
| @react-three/drei | Helpers like useGLTF, useScroll |
| Tailwind CSS | Utility-first styling |
| Three.js | WebGL 3D engine (under the hood) |
git clone https://github.com/your-username/macbook-clone.git
cd macbook-clone