Titanium iPhone 15 Pro - 3D Showcase Website

A fully interactive and responsive 3D website built using modern JavaScript tools and libraries. Experience the elegance of the iPhone 15 Pro in real-time 3D with smooth animations and color variations.

---

📌 Overview

This project is a visually rich, interactive 3D showcase of the Titanium iPhone 15 Pro, built to simulate a premium Apple-like product launch page. It features smooth GSAP animations, dynamic model rendering using Three.js, and an engaging video carousel — all optimized for performance and responsiveness.

---

🚀 Tech Stack

• React.js – Frontend UI framework
• Three.js & React Three Fiber – 3D rendering in the browser
• GSAP (GreenSock) – For scroll-based animations and transitions
• Tailwind CSS – For fast and responsive styling
• Vite – Lightning-fast development tooling

---

🎯 Features

• 🎥 Realistic 3D iPhone Models with interactive color and size variations
• 🌐 Fully Responsive Design – Works smoothly on all devices
• 💫 GSAP-powered Animations – Scroll-triggered animations for smooth transitions
• 🎞️ Custom Video Carousel – Highlight product features with synced text and video
• 🧠 Clean, Modular Codebase – Easily maintainable and scalable structure

---

🛠️ Getting Started

Prerequisites

• Node.js & npm installed
• Git installed

Installation

git clone https://github.com/your-username/titanium-iphone-showcase.git
cd titanium-iphone-showcase
npm install
npm run dev

Visit http://localhost:5173 in your browser to view the project.

---

📂 Project Structure

.
├── public/               # Static files and assets
├── src/
│   ├── components/       # Reusable components
│   ├── constants/        # Model data, colors, text, etc.
│   ├── utils/            # Helpers and assets
│   ├── App.jsx           # Main app structure
│   └── main.jsx          # Entry point
├── tailwind.config.js    # Tailwind CSS configuration
└── vite.config.js        # Vite config

---

📈 Roadmap

• Add product customization (rotate, zoom)
• Light/Dark theme toggle
• Optional product specs comparison table
• Deploy to GitHub Pages / Vercel

---

📣 Acknowledgements

While this is an original project crafted with my own improvements and creativity, it was also inspired by real-world Apple-style product pages.

---

🧑‍💻 Author

Aditya Sharma 🎓 Frontend Developer | Passionate about JavaScript, 3D Web, and Clean UI

---

📄 License

This project is open-source and available under the MIT License.

---