Explore Tesla vehicles through a cinematic web experience with parallax animations and interactive elements.
Tesla Cinematic Experience is an interactive web project built with Next.js, React, and TypeScript.
It features full-screen parallax sections for Tesla models with cinematic animations, Dark/Light Mode, and a dynamic galactic background.
This project focuses on modern UI, parallax scrolling, and interactive components, demonstrating front-end skills in animation and responsiveness.
- 🎬 Home Page with parallax sections for each Tesla model
- 🌌 Galactic Background — animated stars moving upward across the screen
- 🌓 Dark/Light Mode — user preference saved in localStorage
- 🛠️ Interactive Buttons — Order Now & Demo Drive with hover effects
- 📱 Fully Responsive across mobile, tablet, and desktop
- 🖱️ Custom Cursor with trailing effect
| Technology | Purpose |
|---|---|
| ⚛️ React | Dynamic UI components |
| 🧭 Next.js | File-based routing & optimization |
| 🟦 TypeScript | Type safety and better code structure |
| 🎨 Tailwind CSS | Styling and responsive design |
| 🎞️ Framer Motion | Animations, parallax effects, and cursor trails |
Users can:
- Scroll through full-screen sections for Tesla models S, 3, X, and Y 🚘
- Enjoy interactive parallax animations for car images and background ✨
- Toggle between Dark and Light Mode 🌗
- Watch stars animate in the galactic background 🌌
- Interact with "Order Now" and "Demo Drive" buttons 🛠️
- Experience a custom cursor with trailing effect 🖱️
This project demonstrates interactive front-end animations, responsive design, and Dark/Light Mode management.
Developed by: Hami Parsa
💬 Front-End Developer | Creating cinematic and interactive web experiences