apple-react-web-app

Bring the Apple iPhone 15 Pro website to life with GSAP animations and Three.js 3D effects. This project is packed with smooth animations and eye-catching 3D models!

gsap · reactjs · tailwindcss · threejs · vite
入门
GitHub在线演示
Stars：40
License：Apache License 2.0
更新：2025/12/11

README

Apple iPhone 15 Website Clone
♨ [ ʀᴇᴀᴄᴛ ᴘʀᴏᴊᴇᴄᴛ ] ♨

ɪ ⁃ ᴘʀᴏᴊᴇᴄᴛ ɪɴꜰᴏ

This repository is a frontend-only clone of Apple’s iPhone 15 Pro website, built with React.js and TailwindCSS, and powered by Vite for a fast and modern development experience.

[!Note] This project aims to replicate the look and feel of the original website, showcasing the design and animations without functional backend elements.


ɪɪ ⁃ ᴠɪꜱᴜᴀʟ ᴛᴏᴜʀ ᴏꜰ ᴛʜᴇ ᴀᴘᴘ: ꜱᴄʀᴇᴇɴꜱ

ɪɪɪ ⁃ ʙᴇʜɪɴᴅ ᴛʜᴇ ᴄᴏᴅᴇ: ᴅᴇᴠ ꜰᴇᴀᴛᴜʀᴇꜱ

⭓ Features

👉 Beautiful Smooth Animations with GSAP: Elevate the user experience with seamless and captivating animations.

👉 3D Model Rendering in Various Colors and Sizes: Interact with dynamic 3D models of the iPhone 15 Pro, displayed in multiple colors and sizes using Three.js.

👉 Custom Video Carousel (GSAP): A unique and interactive video carousel designed to engage users and enhance browsing.

👉 Completely Responsive Design: Optimized for every screen size, delivering a consistent experience across all devices.

👉 Showcases UI/UX Excellence: Focused entirely on frontend design and user interactions, with no backend or functional features implemented.

👉 Reusable and Clean Code Architecture: Built with reusability and maintainability in mind for seamless project scaling.


⭓ Technologies Used

  • React.js: Component-based structure for building the UI.
  • Three.js: Rendering 3D models and effects.
  • React Three Fiber: Simplified Three.js integration in React.
  • React Three Drei: Helper components for easier 3D development.
  • GSAP (GreenSock): Creating fluid and engaging animations.
  • Vite: Modern development environment for blazing-fast builds.
  • Tailwind CSS: For fast, responsive, and modern styling.

🚀 Quick Start

Follow these steps to set up the project on your local machine.

Prerequisites

Ensure you have the following installed:

Clone the Repository

git clone https://github.com/ZyferLink/apple-react-web-app.git
cd apple-react-web-app

Install Dependencies

Use npm to install the required dependencies:

npm install

Run the Project

Start the development server:

npm run dev

Then, open http://localhost:5173 in your browser to see the project in action.


[!Note] Build for Production
If you need a production-ready build, run:

npm run build

ᴠ ⁃ ᴘʀᴏᴊᴇᴄᴛ ʙʀᴀɴᴄʜᴇꜱ

PRODUCTION BRANCH :
Stable code for deployment
➲ main

DEVELOPMENT BRANCH :
Active codebase for ongoing development efforts (New features, bug fixes, and improvements..)
➲ dev-current


➲ Code from the scratch

Explore the branches: Stage 1–9

Branches

  1. dev-stage-1-init_project
    Initial project setup.

  2. dev-stage-2-add_resource
    Added required resources.

  3. dev-stage-3-init_development
    Initialized development environment.

  4. dev-stage-4-impl_components
    Implemented core UI components.

  5. dev-stage-5-impl_video_carousel
    Developed the video carousel feature.

  6. dev-stage-6-impl_3d_model
    Added 3D model rendering functionality.

  7. dev-stage-7-impl_device_features
    Implemented the "Device Features" section.

  8. dev-stage-8-impl_feat_how_it_works
    Added the "How It Works" section.

  9. dev-stage-9-impl_section_footer
    Implemented the footer section.


ᴠɪ ⁃ ᴘʀᴏᴊᴇᴄᴛ ɴᴏᴛᴇꜱ

N/A