🚀 macbook-animation

A high-fidelity 3D MacBook animation built with React Three Fiber, TailwindCSS, and Vite.

---

🔍 Overview

macbook-animation is a performance-tuned, WebGL-powered 3D experience powered by React Three Fiber. It’s engineered with modularity and responsiveness in mind, making it ideal for integration into modern React-based UIs.

Use Cases:

• ✨ Portfolio hero sections
• 📦 SaaS product demos
• 🚀 Landing pages
• 🧪 Experimental interactive UI

---

🛠 Tech Stack

• ⚛️ React 18 – Modern UI framework
• 🎨 TailwindCSS – Utility-first CSS framework
• 🎮 Three.js + @react-three/fiber – Declarative 3D with React
• 🧩 @react-three/drei – Helpers for efficient 3D composition
• ⚡ Vite – Lightning-fast dev and build tool
• ✅ ESLint – Code quality enforcement

---

📦 Getting Started

Clone the repository and run the project locally:

git clone https://github.com/MuhammadTanveerAbbas/Macbook-Animation.git
cd macbook-animation
npm install
npm run dev

The app will be served at http://localhost:5173

---

📁 Project Structure

├── public/             # Static assets (models, textures, etc.)
├── src/
│   ├── components/     # 3D elements and logic containers
│   ├── styles.css/     # Tailwind and custom styles
│   ├── App.jsx         # Main UI shell
│   └── macContainer    # 3D Model Customizations
├── vite.config.js      # Vite configuration
└── tailwind.config.js  # TailwindCSS configuration

---

🧩 Customization Tips

• Swap the MacBook model with your own .glb/.gltf asset via the public/ folder.
• Tweak animation speed or interactivity via component props.
• Extend Tailwind config for custom themes or breakpoints.

---

🤝 Contributing

Contributions are welcome! If you're proposing a major change, please open an issue first to discuss it.

📄 License

Distributed under the MIT License. See LICENSE for more information.

---