A stunning interactive 3D showcase of the iPhone 15 featuring smooth animations, responsive design, and immersive user experience. This project recreates Apple's iPhone 15 Pro website using React.js, Three.js, and GSAP animations.
- Interactive 3D Models - Explore the iPhone 15 Pro from every angle with dynamic Three.js rendering
- Smooth Animation Effects - Captivating transitions and scroll animations powered by GSAP
- Custom Video Carousel - Interactive video showcase highlighting iPhone features
- Color Customization - View the iPhone in different color variants (Black, Blue, White, Yellow)
- Fully Responsive Design - Optimized experience across all devices (mobile, tablet, desktop)
- Performance Optimized - Fast loading and smooth interactions even with complex 3D elements
- Frontend Framework: React.js
- 3D Rendering: Three.js with React Three Fiber & Drei
- Animations: GSAP (GreenSock Animation Platform)
- Build Tool: Vite for fast development and optimized production builds
- Styling: TailwindCSS for utility-first responsive design
- Error Tracking: Sentry integration for real-time monitoring
- Node.js (v14.0.0 or later)
- npm or yarn
-
Clone the repository:
git clone https://github.com/LankeSathwik7/iPhone.git cd iPhone -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open http://localhost:5173 in your browser to view the application
Navigate through the website to experience:
- Rotating 3D iPhone model that responds to scroll events
- Smooth section transitions with GSAP animations
- Interactive color selection for the iPhone model
- Responsive video showcases highlighting key features
- Detailed product information with animated reveals
.
├── README.md
├── index.html
├── package.json
├── postcss.config.js
├── public
│ ├── assets
│ │ ├── images
│ │ │ └── [image files]
│ │ └── videos
│ │ └── [video files]
│ └── models
│ └── scene.glb
├── src
│ ├── App.jsx
│ ├── components
│ │ ├── ErrorButton.jsx
│ │ ├── Features.jsx
│ │ ├── Footer.jsx
│ │ ├── Hero.jsx
│ │ ├── Highlights.jsx
│ │ ├── HowItWorks.jsx
│ │ ├── IPhone.jsx
│ │ ├── Lights.jsx
│ │ ├── Loader.jsx
│ │ ├── Model.jsx
│ │ ├── ModelView.jsx
│ │ ├── Navbar.jsx
│ │ └── VideoCarousel.jsx
│ ├── constants
│ │ └── index.js
│ ├── index.css
│ ├── main.jsx
│ └── utils
│ ├── animations.js
│ └── index.js
├── tailwind.config.js
└── vite.config.js
The project uses Three.js with React Three Fiber to render and manipulate the 3D iPhone model, allowing users to view it from different angles.
GSAP powers the smooth animations, including scroll-triggered effects, section transitions, and interactive elements throughout the site.
A custom video carousel showcases iPhone features with smooth transitions and playback controls.
TailwindCSS ensures the website looks and functions perfectly across all device sizes.
- Parallax Effects: Creating depth with elements moving at different speeds
- Scroll Triggers: Animations triggered based on scroll position
- Model Rotations: 3D iPhone model that rotates in response to user interaction
- Fade Transitions: Smooth opacity transitions between sections
- Color Changes: Seamless transitions when changing iPhone color variants
npm run dev- Starts the development servernpm run build- Builds the app for productionnpm run preview- Previews the built app locallynpm run lint- Runs ESLint to check code quality
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature
- Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Three.js for 3D rendering capabilities
- GSAP for powerful animation tools
- React Three Fiber for React rendering with Three.js
- TailwindCSS for utility-first CSS
- Vite for fast development experience
- JavaScript Mastery for the complete tutorial that was followed to create this project
Made with ❤️ by LankeSathwik7