This project is a detailed recreation of Apple's iPhone 16 Pro website, developed with React.js and TailwindCSS. It showcases the effective use of GSAP (Greensock Animations) and Three.js to display iPhone 15 Pro models in various colors and shapes.
- Faithful recreation of the iPhone 16 Pro interface
- Smooth animations using GSAP
- Interactive 3D models with Three.js
- Responsive design with TailwindCSS
- Display of different iPhone colors
- Smooth transitions and visual effects
- React.js: ^19.0.0
- React DOM: ^19.0.0
- GSAP (Greensock Animation Platform): ^3.12.7
- TailwindCSS: ^4.0.0
- Three.js: Latest version
- Vite: ^6.0.11
- Bun.js: Latest version
- Cloudflare: For deployment and CDN services
Follow these steps to set up the project locally:
-
Clone the repository:
git clone [URL-of-the-repository]
-
Navigate into the project directory:
cd apple-website-with-react-threejs -
Install dependencies:
You can use either npm or Bun.js to install the dependencies. Choose one of the following commands:
Using npm:
npm install
Using Bun.js:
bun install
-
Start the development server:
Using npm:
npm run dev
Using Bun.js:
bun run dev
-
Open your browser and navigate to
http://localhost:5173(or the port specified in your terminal) to view the application.
The website allows users to:
- Explore the iPhone 16 Pro in 3D
- View different color variants
- Interact with smooth animations
- Explore product features
Contributions are welcome! To contribute to this project, please follow these steps:
-
Fork the repository.
-
Create a new branch:
git checkout -b feature/improvement
-
Commit your changes:
git commit -m 'Add new feature' -
Push to the branch:
git push origin feature/improvement
-
Open a Pull Request.
Need help or found a bug? Join our Discord community with over 27k+ members where people help each other out.
This project is under the MIT License - see the LICENSE.md file for details.
Deus lo vult
⭐️ If you liked this project, don't forget to give it a star!