https://github.com/samirzjadhav/iphone-react-gsap-web
IPHONE WEBSITE , A visually immersive iPhone-themed website created using React, GSAP, and Three.js. This project showcases smooth animations, 3D interactions, and dynamic visuals to deliver an engaging user experience. Built with modern web technologies for a sleek and responsive design
https://github.com/samirzjadhav/iphone-react-gsap-web
gsap react react-hooks react-router reactjs three-js
Last synced: 9 months ago
JSON representation
IPHONE WEBSITE , A visually immersive iPhone-themed website created using React, GSAP, and Three.js. This project showcases smooth animations, 3D interactions, and dynamic visuals to deliver an engaging user experience. Built with modern web technologies for a sleek and responsive design
- Host: GitHub
- URL: https://github.com/samirzjadhav/iphone-react-gsap-web
- Owner: samirzjadhav
- Created: 2025-01-06T07:13:02.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-14T06:16:14.000Z (over 1 year ago)
- Last Synced: 2025-01-14T06:35:17.592Z (over 1 year ago)
- Topics: gsap, react, react-hooks, react-router, reactjs, three-js
- Language: JavaScript
- Homepage:
- Size: 37.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# iPhone 15 Pro Website Clone 🚀
_A visually captivating replica of the iPhone 15 Pro website, featuring cutting-edge animations and 3D interactions._
---
## 🤖 Introduction
This project is a high-fidelity clone of the iPhone 15 Pro website, showcasing **Three.js** for 3D model rendering and **GSAP (Greensock Animation Platform)** for smooth animations. From dynamic 3D models in various colors and sizes to a custom video carousel, this clone is a testament to modern web design and interactive experiences.
---
## 📚 Built with JavaScript Mastery
Inspired by a tutorial from **JavaScript Mastery**, this project demonstrates advanced techniques in **React Three Fiber**, **GSAP**, and **Three.js**. It's perfect for anyone looking to deepen their understanding of interactive web development.
---
## ⚙️ Tech Stack
- **React.js** – Component-based library for building dynamic user interfaces.
- **Three.js** – For rendering 3D models and creating immersive experiences.
- **React Three Fiber** – Integrates Three.js into React.
- **React Three Drei** – Essential helpers for React Three Fiber.
- **GSAP (Greensock)** – Smooth animations for modern web apps.
- **Vite** – Fast and lightweight build tool.
- **Tailwind CSS** – Utility-first framework for responsive and modern styling.
---
## 📦 Dependencies
Here are the dependencies used in this project:
```json
"dependencies": {
"@gsap/react": "^2.1.0",
"@react-three/drei": "^9.101.0",
"@react-three/fiber": "^8.15.19",
"@sentry/cli": "^2.40.0",
"@sentry/react": "^7.120.3",
"@sentry/vite-plugin": "^2.14.3",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"cra-template": "1.2.0",
"gsap": "^3.12.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"three": "^0.162.0"
}
```
## 🔋 Features
- **👉 Smooth GSAP Animations**
Experience seamless animations for an engaging and dynamic UI.
- **👉 3D Model Rendering**
Interactive 3D iPhone models with options for various colors and sizes.
- **👉 Custom Video Carousel**
A GSAP-powered carousel for showcasing iPhone features interactively.
- **👉 Fully Responsive Design**
Optimized for all screen sizes, from mobile to desktop.
- **👉 Modular Code Architecture**
Reusable components for easy scalability and maintainability.
---
## 🤸 Quick Start
Follow these steps to set up and run the project locally:
1. **Clone the repository:**
```bash
git clone https://github.com/samirzjadhav/iphone-react-gsap-web.git
```
2. **Navigate to the project directory:**
```bash
cd iphone-react-gsap-web
```
3. **Install dependencies:**
```bash
npm install
```
4. **Start the development server:**
```bash
npm run dev
```
5. **Open your browser and visit:**
```
http://localhost:3000
```
---
## 🌐 Live Demo
[Explore the live demo](https://github.com/samirzjadhav/iphone-react-gsap-web)
---
## 📖 Learn More
- [GSAP Documentation](https://greensock.com/docs/)
- [Three.js Documentation](https://threejs.org/docs/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [React Documentation](https://reactjs.org/docs/getting-started.html)
---
## 👨💻 Author
Created with ❤️ by [Samir Z Jadhav](https://samirj.vercel.app/).
Feel free to star ⭐ the repository if you find this project helpful!
---
## 🛠️ Contributions
Contributions are welcome! Feel free to fork this repository, open issues, or submit pull requests to make the project even better.
---
## 📄 License
This project is licensed under the [MIT License](LICENSE).
---
## 🙌 Thank You
Thank you for exploring the **iPhone 15 Pro Website Clone**!
Feel free to share your feedback or reach out for collaboration. 🚀