{"id":24055731,"url":"https://github.com/samirzjadhav/iphone-react-gsap-web","last_synced_at":"2025-09-25T20:16:49.611Z","repository":{"id":271227232,"uuid":"912682002","full_name":"samirzjadhav/iphone-react-gsap-web","owner":"samirzjadhav","description":"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","archived":false,"fork":false,"pushed_at":"2025-01-14T06:16:14.000Z","size":39364,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-14T06:35:17.592Z","etag":null,"topics":["gsap","react","react-hooks","react-router","reactjs","three-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samirzjadhav.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-06T07:13:02.000Z","updated_at":"2025-01-14T06:16:17.000Z","dependencies_parsed_at":"2025-01-06T12:38:21.817Z","dependency_job_id":null,"html_url":"https://github.com/samirzjadhav/iphone-react-gsap-web","commit_stats":null,"previous_names":["samirzjadhav/iphone-react-gsap-web"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samirzjadhav%2Fiphone-react-gsap-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samirzjadhav%2Fiphone-react-gsap-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samirzjadhav%2Fiphone-react-gsap-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samirzjadhav%2Fiphone-react-gsap-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samirzjadhav","download_url":"https://codeload.github.com/samirzjadhav/iphone-react-gsap-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240841539,"owners_count":19866398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gsap","react","react-hooks","react-router","reactjs","three-js"],"created_at":"2025-01-09T04:30:16.407Z","updated_at":"2025-09-25T20:16:44.579Z","avatar_url":"https://github.com/samirzjadhav.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# iPhone 15 Pro Website Clone 🚀\n\n![iPhone 15 Pro Hero](./src/assets/images/iPhone-website.png)  \n_A visually captivating replica of the iPhone 15 Pro website, featuring cutting-edge animations and 3D interactions._\n\n---\n\n## 🤖 Introduction\n\nThis 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.\n\n---\n\n## 📚 Built with JavaScript Mastery\n\nInspired 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.\n\n---\n\n## ⚙️ Tech Stack\n\n- **React.js** – Component-based library for building dynamic user interfaces.\n- **Three.js** – For rendering 3D models and creating immersive experiences.\n- **React Three Fiber** – Integrates Three.js into React.\n- **React Three Drei** – Essential helpers for React Three Fiber.\n- **GSAP (Greensock)** – Smooth animations for modern web apps.\n- **Vite** – Fast and lightweight build tool.\n- **Tailwind CSS** – Utility-first framework for responsive and modern styling.\n\n---\n\n## 📦 Dependencies\n\nHere are the dependencies used in this project:\n\n```json\n\"dependencies\": {\n  \"@gsap/react\": \"^2.1.0\",\n  \"@react-three/drei\": \"^9.101.0\",\n  \"@react-three/fiber\": \"^8.15.19\",\n  \"@sentry/cli\": \"^2.40.0\",\n  \"@sentry/react\": \"^7.120.3\",\n  \"@sentry/vite-plugin\": \"^2.14.3\",\n  \"@types/react\": \"^18.2.56\",\n  \"@types/react-dom\": \"^18.2.19\",\n  \"cra-template\": \"1.2.0\",\n  \"gsap\": \"^3.12.5\",\n  \"react\": \"^18.2.0\",\n  \"react-dom\": \"^18.2.0\",\n  \"react-scripts\": \"5.0.1\",\n  \"three\": \"^0.162.0\"\n}\n```\n\n\n## 🔋 Features\n\n- **👉 Smooth GSAP Animations**  \n  Experience seamless animations for an engaging and dynamic UI.\n\n- **👉 3D Model Rendering**  \n  Interactive 3D iPhone models with options for various colors and sizes.\n\n- **👉 Custom Video Carousel**  \n  A GSAP-powered carousel for showcasing iPhone features interactively.\n\n- **👉 Fully Responsive Design**  \n  Optimized for all screen sizes, from mobile to desktop.\n\n- **👉 Modular Code Architecture**  \n  Reusable components for easy scalability and maintainability.\n\n---\n\n## 🤸 Quick Start\n\nFollow these steps to set up and run the project locally:\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/samirzjadhav/iphone-react-gsap-web.git\n   ```\n\n2. **Navigate to the project directory:**\n\n   ```bash\n   cd iphone-react-gsap-web\n   ```\n\n3. **Install dependencies:**\n\n   ```bash\n   npm install\n   ```\n\n4. **Start the development server:**\n\n   ```bash\n   npm run dev\n   ```\n\n5. **Open your browser and visit:**\n   ```\n   http://localhost:3000\n   ```\n\n---\n\n## 🌐 Live Demo\n\n[Explore the live demo](https://github.com/samirzjadhav/iphone-react-gsap-web)\n\n---\n\n## 📖 Learn More\n\n- [GSAP Documentation](https://greensock.com/docs/)\n- [Three.js Documentation](https://threejs.org/docs/)\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs)\n- [React Documentation](https://reactjs.org/docs/getting-started.html)\n\n---\n\n## 👨‍💻 Author\n\nCreated with ❤️ by [Samir Z Jadhav](https://samirj.vercel.app/).\n\nFeel free to star ⭐ the repository if you find this project helpful!\n\n---\n\n## 🛠️ Contributions\n\nContributions are welcome! Feel free to fork this repository, open issues, or submit pull requests to make the project even better.\n\n---\n\n## 📄 License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n## 🙌 Thank You\n\nThank you for exploring the **iPhone 15 Pro Website Clone**!\nFeel free to share your feedback or reach out for collaboration. 🚀\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamirzjadhav%2Fiphone-react-gsap-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamirzjadhav%2Fiphone-react-gsap-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamirzjadhav%2Fiphone-react-gsap-web/lists"}