A stunning, highly interactive clone of an Apple product page, featuring a fully scroll-animated 3D MacBook Pro model. Built with modern web technologies, this project showcases advanced scroll-linked animations, 3D model rendering, and responsive design to emulate a premium user experience.
- Interactive 3D Models: Realistic MacBook Pro models rendered directly in the browser using React Three Fiber.
- Scroll-Triggered Animations: State-of-the-art scroll animations powered by GSAP and ScrollTrigger, turning scrolling into a cinematic experience.
- Dynamic Textures & Video: Video textures applied dynamically onto the 3D MacBook screen, synchronized with text reveal animations.
- Breathtaking UI/UX: Premium design aesthetics mimicking Apple's legendary clean, dark-mode style with glassmorphism touches and smooth transitions.
- State Management: Effortless cross-component state management handling model scale and active screen textures using Zustand.
- Responsive Layout: Perfectly adapted for both desktop and mobile viewing.
Here is a glimpse of the application:
- Framework: React 18, Vite
- 3D Rendering: Three.js, React Three Fiber (
@react-three/fiber), React Three Drei (@react-three/drei) - Animation: GSAP (GreenSock Animation Platform) + ScrollTrigger,
@gsap/react - Styling: Tailwind CSS v4, Vanilla CSS
- State Management: Zustand
- Utilities:
clsx,react-responsive
To get a local copy up and running, follow these simple steps.
You need Node.js and npm installed on your machine.
- npm
npm install npm@latest -g
- Clone the repository
git clone https://github.com/WhiiteRose/Apple.git
- Navigate to the project directory
cd Apple - Install dependencies
npm install
- Start the development server
npm run dev
The 3D models (.glb / .gltf) and video/image assets are placed in the public or src/assets folders. Make sure your local environment is correctly serving these static files for the textures and models to render correctly.
Developed with ❤️ by WhiiteRose.