- ✨ Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🧱 Project Structure
- 🧠 Architecture & Animations
- 🤝 Contribution
- 🔗 Contacts
- 📄 License
- 🙏 Acknowledgements
Macbook Landing Page is a high-end, Apple-style 3D product website built with cutting-edge web technologies like React, GSAP, Three.js, and TailwindCSS.
It features:
- Immersive 3D visuals powered by Three.js
- Scroll-triggered GSAP animations
- Responsive, modern layout
- Cinematic transitions and masking effects
The project is ideal for designers and developers aiming to build interactive product showcases, tech landing pages, or portfolio experiences with smooth animations and premium UI feel.
| Technology | Purpose |
|---|---|
| React.js | Component-based architecture for dynamic UI |
| GSAP + ScrollTrigger | Smooth, scroll-driven animations |
| Three.js | Realistic 3D rendering and lighting |
| TailwindCSS | Utility-first responsive styling |
| Zustand | Lightweight global state management |
| Vite | Fast build tool and dev server |
| Hostinger | Hosting and deployment |
| CodeRabbit | AI-powered code review integration |
- 💎 Apple-Style Product Animation — Showcase products with cinematic motion and scroll-sync effects
- ⚙️ ScrollTrigger Timeline — Multi-section animation synchronization powered by GSAP
- 🧩 3D Model Integration — Interactive Three.js scenes with realistic lighting and depth
- 🪄 Image Masking & Reveal Effects — Scroll-pinned masks for dynamic transitions
- 🖥️ Responsive Layout — Fully optimized for desktop, tablet, and mobile screens
- 🎨 Customizable & Scalable — Modular structure to add more sections or models easily
- ⚡ Optimized Performance — Smooth frame rates even with heavy animations
Ensure the following are installed:
git clone https://github.com/Itssanthoshhere/Macbook-Landing-Page.git
cd Macbook-Landing-Page
### Install Dependencies
```bash
npm install
```
### Run the Development Server
```bash
npm run dev
```
Visit http://localhost:5173 to view the project locally.
| Folder/File | Description |
|---|---|
| src/components | React components like Showcase, Navbar, Hero, etc. |
| src/constants | Data files for sections and assets |
| src/store | Zustand state management |
| public/ | Static assets – videos, images, and 3D models |
| vite.config.js | Vite configuration for fast bundling |
| index.css | Global styles with TailwindCSS directives |
The animation architecture is powered by GSAP timelines with ScrollTrigger integration.
Key highlights:
- Section-based triggers for pinned scenes
- Video + mask reveals synchronized with scroll
- Responsive animation breakpoints via
useMediaQuery - Optimized timeline flow for performance
Each visual section (like “Showcase”, “Hero”, or “Performance”) has its own animation sequence and is controlled declaratively via React hooks.
Contributions are always welcome! To contribute:
-
Fork the repo
-
Create a new branch
git checkout -b feature/my-feature
-
Make changes and commit
git commit -m "feat: add my feature" -
Push your branch
git push origin feature/my-feature
-
Create a Pull Request 🎉
- GitHub: Itssanthoshhere
- LinkedIn: Santhosh VS
This project is for educational and portfolio purposes only. All rights to assets, logos, and trademarks belong to their respective owners.
- JavaScript Mastery – for the tutorial reference
- React – for the component-based UI
- GSAP – for scroll-driven motion
- Three.js – for 3D rendering
- TailwindCSS – for utility styling
If you liked this project, give it a ⭐ on GitHub and share it with your network!