A stunning iPhone 15 Pro web experience recreated with React, Three.js, GSAP, and Tailwind CSS. This project showcases interactive 3D models, smooth GSAP animations, and an Apple-inspired UI, delivering a seamless and immersive experience.
🔗 Live Demo: iPhone 15 Web Clone
✅ GSAP Animations – Smooth transitions and scroll-based animations. ✅ Three.js 3D Effects – Interactive and animated iPhone 15 Pro models. ✅ Responsive UI – Optimized for all devices with Tailwind CSS. ✅ Video Carousel – Scrollable videos showcasing product highlights. ✅ Sentry Performance Monitoring – For tracking performance issues. ✅ Apple-Inspired Aesthetic – Clean and modern design. ✅ Fully Interactive – Explore features with engaging UI elements.
- React – Component-based UI development.
- Three.js – 3D model rendering and animations.
- GSAP – Smooth scrolling and animation effects.
- Tailwind CSS – Modern styling and responsive design.
- Sentry – Performance monitoring and debugging.
-
Clone the repository:
git clone https://github.com/mkhalidh/iphone15-web-clone.git cd iphone15-clone -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open in browser:
http://localhost:5173/
🔹 Navbar – Apple-inspired navigation bar.
🔹 Hero Section – Stunning 3D iPhone model with animations.
🔹 Highlights – Key product features with smooth animations.
🔹 Video Carousel – Interactive video showcase.
🔹 3D Model Section – Realistic, interactive iPhone model using Three.js.
🔹 Performance Monitoring – Integrated Sentry to track performance.
🔹 Features & How It Works – Detailed breakdown of iPhone 15 Pro capabilities.
🔹 Footer – Elegant Apple-style footer.
Deployed on Vercel for fast and optimized performance.
npm run build
vercel deploy(Mobile X Desktop)
🔹 Improved 3D interactions and animations.
🔹 Enhanced performance optimization.
This project is for educational purposes only and is not affiliated with Apple Inc.
Enjoy exploring the iPhone 15 Pro Web Clone! 🚀🎨