Cupertino Motion

An immersive Apple-inspired 3D web experience built with React 19, Three.js & GSAP

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🚀 Quick Start

🤖 Introduction

Experience an immersive, Apple-style product showcase featuring the MacBook Pro with stunning 3D visuals and smooth animations. This project demonstrates advanced web development techniques combining React, Three.js, and GSAP to create a captivating user experience that rivals official Apple product pages. Built with modern technologies and optimized for performance across all devices.

⚙️ Tech Stack

• React.js 19
• Three.js
• React Three Fiber
• React Three Drei
• GSAP (GreenSock Animation Platform)
• @gsap/react
• TailwindCSS 4
• Zustand (State Management)
• JavaScript (ES6+)
• Vite
• clsx

🔋 Features

👉 Interactive 3D MacBook Models: Fully interactive 3D MacBook Pro models (14" and 16") rendered with Three.js and React Three Fiber, allowing users to explore the product from every angle.

👉 Smooth GSAP Animations: Cinematic scroll-triggered animations powered by GSAP and ScrollTrigger, creating a fluid and engaging storytelling experience as users navigate through the page.

👉 Product Customization: Real-time color switcher (Space Gray & Silver) and size selector (14" & 16"), with smooth transitions between different model configurations.

👉 Responsive Design: Fully responsive layout built with TailwindCSS 4, ensuring optimal viewing experience across desktop, tablet, and mobile devices with adaptive 3D model scaling.

👉 Studio-Quality Lighting: Professional three-point lighting setup in the 3D scene, creating realistic shadows and highlights that showcase the MacBook's premium design.

👉 Optimized Performance: Carefully optimized 3D models and animations for smooth 60fps performance, with intelligent model switching and resource management.

👉 State Management with Zustand: Lightweight and efficient state management for handling product configurations (color, size, texture) across components.

👉 Video Integration: Dynamic hero video with enhanced playback speed for a more cinematic feel, preloaded for instant playback.

👉 Apple-Inspired UI/UX: Pixel-perfect recreation of Apple's design language, including typography, spacing, color schemes, and interaction patterns.

👉 Modular Component Architecture: Clean, reusable component structure with separation of concerns, making the codebase maintainable and scalable.

👉 Multiple Showcase Sections: Comprehensive product presentation with dedicated sections for hero, product viewer, showcase, performance metrics, features, highlights, and footer.

👉 Mobile-Optimized 3D: Responsive 3D canvas with adjusted camera positions and model scales for optimal mobile viewing experience.

including modern React patterns, custom hooks, and best practices for 3D web development.

Overall, this project demonstrates how modern frontend technologies can be combined to build polished, interactive 3D product experiences on the web. It brings together scroll-driven animations, real-time 3D rendering, responsive scene adaptation, and thoughtful state management, with a clear focus on performance, maintainability, and user experience. The patterns and techniques used here closely mirror those found in contemporary, high-quality product websites.

🚀 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/Bharathkdev/cupertino-motion.git
cd react-macbook-gsap-app

Installation

Install the project dependencies using npm:

npm install

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.

Building for Production

npm run build

Preview Production Build

npm run preview