CineVision Pro Inspiration We've all been there, booking cinema tickets online, staring at a flat 2D grid of colored squares, and hoping the seats we pick will actually have a good view. What if you could see your view before you sit? That question sparked CineVision Pro.
We wanted to combine the power of Google's Gemini 3 with immersive web technologies to solve a real, everyday frustration and make the experience feel as cinematic as the movie itself.
What It Does CineVision Pro is an AI-powered cinema seat selection experience with three core features:
AI Seat Concierge Powered by Gemini 3 Flash, a conversational chat interface where users describe preferences in natural language ("center seats, not too close, aisle access for 4") and the AI analyzes the full seating grid to recommend optimal seats with reasoning. AI Image Analysis Upload a photo of any real cinema and Gemini 3 Pro extracts a complete interactive seat map using vision + structured tool calling. Immersive 3D Cinema View Step into a perspective-correct 3D theater with a real video playing on screen, rendered from your exact seat position. Camera parameters are AI-calculated for geometric accuracy. How We Built It Frontend: React + TypeScript + Tailwind CSS + Framer Motion for a glassmorphic, film-grain cinema aesthetic 3D Engine: CSS 3D transforms with perspective projection, spring-based camera transitions AI Backend: Supabase Edge Functions calling the Lovable AI Gateway (google/gemini-3-flash-preview and google/gemini-3-pro-preview) Structured Output: Gemini's tool calling feature for precise, typed JSON extraction no regex parsing needed Design: Warm amber/gold palette, vintage ticket rip interaction, film grain overlays The AI concierge works by serializing the entire seating layout into the prompt context, then using tool calling to extract structured seat coordinates:
Challenges Spatial reasoning accuracy Getting Gemini to consistently return valid row/column coordinates that map correctly to the visual grid required careful prompt engineering and rectangular grid normalization. 3D perspective math — Calculating realistic viewing angles from arbitrary seat positions: ( \theta_y = k \cdot \arctan\left(\frac{x_{offset}}{z_{distance}}\right) ) where ( k ) is a perspective strength factor. Cinema atmosphere Making a web app feel like a real theater with lighting, grain, vignettes, and reflections all in CSS. What I Learned Gemini 3's tool calling is remarkably reliable for structured spatial extraction Zero-temperature + explicit self-check instructions dramatically improve grid accuracy Spring-based camera animations create far more cinematic movement than linear easing The gap between "functional" and "delightful" is mostly in the micro-interactions
Log in or sign up for Devpost to join the conversation.