A fully animated, 3D-driven product website built using modern web technologies. Smooth interactions, scroll-linked animations, and a premium Apple-style UI.
- ✨ Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🔗 Assets
- 🚀 More
This project is a modern, Apple-inspired 3D product showcase built with React, Three.js, GSAP, and Tailwind CSS.
It focuses on delivering a premium interactive experience through:
- Realistic 3D rendering
- Scroll-controlled animations
- Smooth transitions and timed sequences
- Responsive layouts for all screen sizes
The purpose is to demonstrate how today’s animation and 3D tools can be combined to create high-end product landing pages suitable for tech brands, portfolios, and commercial product demos.
- CodeRabbit – AI-based code review assistant integrated with Git workflows.
- GSAP – Provides animations, scroll interactions, masking effects, and pinned sections.
- Hostinger – Used for deployment and production hosting.
- React – Component-driven UI architecture supporting reusability and animations.
- Tailwind CSS – Utility-first styling for rapid UI development.
- Three.js – For rendering 3D scenes, models, lighting, and camera movement.
- Vite – Development server and bundler with lightning-fast builds.
- Zustand – Lightweight global state management.
👉 High-Fidelity 3D Product Scene with realistic lighting
👉 Scroll-Triggered Animations for immersive UI
👉 Smooth Timeline Control using GSAP
👉 Pinned Sections to animate content in place
👉 Image Masking Transitions for modern visual effects
👉 Multi-Stage Animation Sequences
👉 Fully Responsive Layout across devices
Ensure you have installed:
- Git
- Node.js
- npm
git clone REPO_URL
cd PROJECT_FOLDER
Install Dependencies
bash
Copy code
npm install
Run Development Server
bash
Copy code
npm run dev
Then open:
arduino
Copy code
http://localhost:5173