Rapple 🌚 | Apple Clone

A visually rich, MacBook-inspired UI clone built using pure web technologies. Designed for learning, experimentation, and portfolio presentation.

📸 Preview

✨ Features

• 🎨 MacBook-inspired UI & layout
• 🪟 Clean menu bar and dock design
• 🧊 Glassmorphism effects
• ⚡ Smooth hover animations
• 📱 Responsive base structure
• 🧩 Easy to extend with JS / Three.js

🛠️ Tech Stack

HTML5	Structure & layout
JavaScript	Application logic, event handling, and interaction control
React	Component-based UI architecture, state management, and scalable interface logic
Tailwind CSS	Utility-first styling for responsive layouts, spacing, and rapid UI development
Three.js / R3F	Real-time 3D rendering, MacBook model visualization, and scene management
GSAP	High-performance animations, smooth transitions, and timeline-based interactions

📂 Project Structure

├── public/
│   ├── fonts/
│   │   ├── black.otf
│   │   ├── bold.otf
│   │   ├── heavy.otf
│   │   ├── light.otf
│   │   ├── medium.otf
│   │   ├── regular.otf
│   │   ├── semibold.otf
│   │   ├── thin.otf
│   │   └── ultralight.otf
│   ├── models/
│   │   ├── macbook-14-transformed.glb
│   │   ├── macbook-14.glb
│   │   ├── macbook-16-transformed.glb
│   │   ├── macbook-16.glb
│   │   ├── macbook-transformed.glb
│   │   └── macbook.glb
│   ├── Screenshots/
│   │   ├── image.png
│   │   ├── image1.png
│   │   ├── image2.png
│   │   └── image3.png
│   ├── videos/
│   │   ├── feature-1.mp4
│   │   ├── feature-2.mp4
│   │   ├── feature-3.mp4
│   │   ├── feature-4.mp4
│   │   ├── feature-5.mp4
│   │   ├── game.mp4
│   │   └── hero.mp4
│   ├── ai.png
│   ├── battery.png
│   ├── cart.svg
│   ├── feature-icon1.svg
│   ├── feature-icon2.svg
│   ├── feature-icon3.svg
│   ├── feature-icon4.svg
│   ├── feature-icon5.svg
│   ├── highlight-bg.png
│   ├── laptop.png
│   ├── logo.svg
│   ├── mask-logo.svg
│   ├── performance1.png
│   ├── performance2.png
│   ├── performance3.png
│   ├── performance4.png
│   ├── performance5.jpg
│   ├── performance6.png
│   ├── performance7.png
│   ├── screen.png
│   ├── search.svg
│   ├── sun.png
│   ├── title.png
│   └── vite.svg
├── src/
│   ├── components/
│   │   ├── models/
│   │   │   ├── Macbook-14.jsx
│   │   │   ├── Macbook-16.jsx
│   │   │   └── Macbook.jsx
│   │   ├── Features.jsx
│   │   ├── Footer.jsx
│   │   ├── Hero.jsx
│   │   ├── Highlights.jsx
│   │   ├── Lights.jsx
│   │   ├── Navbar.jsx
│   │   ├── PerformanceWindow.jsx
│   │   ├── ProductViewer.jsx
│   │   ├── ShowCase.jsx
│   │   └── ShowCaseData.jsx
│   ├── constants/
│   │   └── index.js
│   ├── store/
│   │   └── index.js
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── LICENCE
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

  

🚀 How to Run the Project Locally

1. Go into the project folder

   cd Macbook_Clone
       

2. Install dependencies

   npm install
       

3. Start the development server

   npm run dev
       

4. Open the app

   Open http://localhost:5173 in your browser.

🎯 Purpose

This project was created to improve frontend skills by recreating a real-world, premium interface. It serves as a portfolio project and a base for experimenting with animations, UI systems, and 3D integrations.

⚠️ Disclaimer

This project is made for educational and portfolio purposes only.
Apple, MacBook, macOS, and related Roggering trademarks are the property of Apple Inc.
This project is not {RR} affiliated with or endorsed by Apple.

📜 License

This project is licensed under the MIT License.
See the LICENSE file for details.

👤 Author

Rakshit Raj
B.Tech CSE (AI & ML) : VIT Bhopal

GitHub: https://github.com/RakshitRajVIT
Portfolio: Coming Soon 🚀