https://github.com/zitaharry/iphone-15-website
I recreated the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects along with custom animations.
https://github.com/zitaharry/iphone-15-website
gsap reactjs threejs
Last synced: 24 days ago
JSON representation
I recreated the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects along with custom animations.
- Host: GitHub
- URL: https://github.com/zitaharry/iphone-15-website
- Owner: zitaharry
- License: mit
- Created: 2024-03-18T18:03:15.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-18T18:26:57.000Z (about 2 years ago)
- Last Synced: 2025-04-11T04:06:21.658Z (about 1 year ago)
- Topics: gsap, reactjs, threejs
- Language: JavaScript
- Homepage:
- Size: 37.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## iPhone 15 Pro Website
## ⚙️ Tech Stack
1. React.jS
2. Three.js
3. React Three Drei
4. React Three Fiber
5. GSAP (Greenstock)
6. Vite
7. Tailwind CSS
## 🔋 Features
# 👉 Beautiful Subtle Smooth Animations using GSAP:
Enhanced user experience with seamless and captivating animations powered by GSAP.
# 👉 3D Model Rendering with Different Colors and Sizes:
Explore the iPhone 15 Pro from every angle with dynamic 3D rendering, offering various color and size options.
# 👉 Custom Video Carousel (made with GSAP):
Engage users with a unique and interactive video carousel developed using GSAP for a personalized browsing experience.
# 👉 Completely Responsive:
Consistent access and optimal viewing on any device with a fully responsive design that adapts to different screen sizes.
and many more, including code architecture and reusability
## 🤸 Quick Start
Follow these steps to set up the project locally on your machine.
# Prerequisites
Make sure you have the following installed on your machine:
1.Git
2. Node.js
3. npm (Node Package Manager)
# Installation
# Install the project dependencies using npm:
npm install
# Running the Project
npm run dev
Open http://localhost:5173 in your browser to view the project.