This is a submission for Weekend Challenge: Passion Edition
Update (Post-Deadline): I noticed a critical bug right at submission and pushed a quick fix after the deadline cutoff. The core features and functionality of the project were completed and submitted on time.
Passion Garage — A Cinematic Automotive Experience Powered by Google Gemini
What I Built
For this challenge, I wanted to explore passion through the world of automotive engineering. To millions of enthusiasts, cars are more than transportation—they represent innovation, performance, craftsmanship, and emotion.
To capture that feeling, I built Passion Garage, a cinematic web experience inspired by legendary performance cars. Instead of a traditional landing page, the website takes users on a scroll-driven journey featuring immersive GSAP animations, storytelling, and an AI-powered automotive assistant.
The experience includes:
- Cinematic scroll storytelling
- Featured performance cars
- BMW Story chapter
- AI Garage powered by Google Gemini
- Smooth GSAP animations
- Fully responsive modern UI
The AI Garage acts as an automotive expert, helping users compare cars, understand engine technologies, learn about performance specifications, and receive personalized recommendations.
My goal was to create something that feels less like a website and more like an interactive automotive experience.
Demo
🌐 Live Website
https://passion-garage-ai.vercel.app/
Screenshorts
Code
GitHub Repository
🚗 Passion Garage
A cinematic automotive experience powered by Google Gemini AI.
Passion Garage is an immersive web experience built for the DEV Weekend Challenge: Passion Edition. Inspired by the passion behind legendary performance cars, the project combines cinematic storytelling, smooth GSAP animations, and an AI-powered automotive assistant to create a unique journey for car enthusiasts.
✨ Features
- 🎬 Cinematic scroll-driven storytelling
- 🚘 Featured performance cars
- 📖 BMW Story experience
- 🤖 AI Garage powered by Google Gemini
- ⚡ GSAP & ScrollTrigger animations
- 📱 Fully responsive design
- 🌙 Modern dark UI inspired by premium automotive brands
- 🚀 Built with the latest Next.js App Router
🤖 AI Garage
AI Garage is an intelligent automotive assistant built using Google Gemini.
Users can:
- Compare performance cars
- Learn about engines and horsepower
- Get buying recommendations
- Explore automotive technologies
- Ask questions about BMW, Porsche, Ferrari, Nissan, Audi, Toyota, Mercedes-Benz, Lamborghini, McLaren, and more
🛠
…How I Built It
The project was built using Next.js App Router, TypeScript, and Tailwind CSS for a fast and modern development experience.
The most exciting part was creating the cinematic scroll experience using GSAP and ScrollTrigger. Instead of relying on static sections, each chapter reveals itself through carefully timed animations to create a story-driven experience.
To qualify for the Best Use of Google AI category, I integrated Google Gemini into the AI Garage section. Rather than building a generic chatbot, I designed an automotive assistant that specializes in:
- Comparing performance cars
- Explaining engine technologies
- Recommending vehicles based on user needs
- Answering automotive questions
- Providing structured, easy-to-read information
The frontend communicates with a Next.js API route, which securely interacts with the Gemini API to generate intelligent automotive responses.
Tech Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- GSAP + ScrollTrigger
- Google Gemini API
- Vercel
Best Use of Google AI
Google Gemini powers the AI Garage, transforming it into an intelligent automotive assistant capable of providing comparisons, recommendations, and educational content about performance vehicles. The AI is integrated as a core feature of the experience rather than an optional add-on.
Thank you for checking out my submission!
I'd love to hear your feedback and suggestions for improving Passion Garage.
Top comments (0)