Awwwards-winning futuristic luxury EV site: scroll-driven cinematic experience built around five videos (hero/exterior/interior/performance/finale), liquid glass UI, custom plasma cursor, WebGL shaders, and 120fps-feeling animations. Inspired by Apple Vision Pro, Tesla, Porsche.
You are an award-winning creative director, motion designer, Three.js engineer and Awwwards-winning frontend developer. Build a futuristic luxury automotive experience using five cinematic videos. VIDEOS (under assets folder) hero.mp4 exterior.mp4 interior.mp4 performance.mp4 finale.mp4 These videos are already generated. The website must be designed around these videos. Do NOT replace them. Do NOT generate new ones. The videos are the storytelling backbone. ====================================================== OBJECTIVE Create one of the most visually impressive automotive websites ever built. It should feel like an interactive cinematic experience rather than a traditional website. The inspiration is Apple Vision Pro, Bugatti, Lotus, Tesla launch events, Porsche configurator, and Awwwards Site of the Day experiences. Every scroll should reveal something new. Nothing should ever feel static. The visitor should constantly feel rewarded while scrolling. The website should look like it was designed in 2050. ====================================================== DESIGN STYLE Ultra futuristic Luxury Minimal Elegant Liquid Glass Neo Futurism Premium No clutter. No generic layouts. Everything should feel handcrafted. ====================================================== COLOR PALETTE Deep Black (#050505) Glass White (#FFFFFF) Electric Violet Royal Blue Neon Magenta Soft Cyan Only use bright colors as lighting accents. The UI should remain elegant. ====================================================== BACKGROUND Each section uses one cinematic video. Section 1: hero.mp4 Section 2: exterior.mp4 Section 3: interior.mp4 Section 4: performance.mp4 Section 5: finale.mp4 Each transition between videos should use a cinematic fade with shader-based blending. No hard cuts. Scrolling should feel like one continuous film. ====================================================== SCROLL EXPERIENCE This website must NOT scroll like a normal webpage. Every scroll reveals a new cinematic moment. Every section introduces new animations. Every scroll advances the story. No dead scrolling. Scrolling should control motion. Use Lenis smooth scrolling. GSAP ScrollTrigger. Motion interpolation. Velocity-based animations. Parallax everywhere. Depth transitions. Layered movement. ====================================================== HERO SECTION Use hero.mp4 Full screen. Massive typography. Minimal floating navigation. Liquid glass CTA. Animated scroll indicator. Floating glass statistics. Subtle floating particles. Camera feeling. Mouse parallax. Headlights glow. Background slowly zooms. ====================================================== EXTERIOR SECTION Use exterior.mp4 As user scrolls, highlight: Front headlights Carbon fiber Wheel Side profile Rear lights Every highlight appears with glowing animated connector lines. Specification cards emerge from glass. Each specification animates. Floating image cards. ====================================================== INTERIOR SECTION Use interior.mp4 Large floating glass cards. Interior hotspots. Ambient lighting animations. Dashboard reveals. Premium materials. Luxury storytelling. Glass overlays. Floating specifications. ====================================================== PERFORMANCE SECTION Use performance.mp4 Battery animation. Acceleration animation. Torque visualization. Energy flowing through animated lines. Performance counters animate from zero. Dynamic charts. Motion synchronized with scroll. ====================================================== FINALE Use finale.mp4 Large cinematic ending. Massive glass CTA. Huge typography. Animated glow. Luxury ending. The website slowly fades into darkness. ====================================================== LIQUID GLASS Everything should use premium Apple-inspired liquid glass. Glass should have: Real blur Reflection Refraction Depth Soft shadows Chromatic dispersion Rounded corners Moving reflections Thin glowing borders Floating appearance ====================================================== MICRO INTERACTIONS Magnetic buttons Glass ripple on hover Cursor spotlight Floating particles Animated borders 3D hover Parallax Dynamic reflections Soft bloom Every interaction should feel premium. ====================================================== CUSTOM CURSOR Replace the default cursor. Create a futuristic energy cursor. A glowing red plasma orb. The cursor emits animated red energy flames. The flames are GPU particle based. Heat distortion. Tiny sparks. Energy trails. The faster the cursor moves, the longer the trail becomes. Hovering over buttons creates expanding energy rings. Hovering over glass creates refraction ripples. Hovering over the car sends a red energy pulse through the vehicle. The cursor should become one of the signature experiences of the website. ====================================================== PARTICLES The page should always feel alive. Floating particles. Tiny glowing dust. Light streaks. Ambient fog. Energy waves. Procedural particle systems. Everything reacts to scroll. ====================================================== 3D EFFECTS Depth layers. Mouse parallax. Floating UI. Perspective transformations. Glass cards move independently. The videos should appear behind multiple translucent layers. ====================================================== TYPOGRAPHY Huge modern typography. Minimal. Elegant. Editorial spacing. Perfect alignment. Luxury hierarchy. ====================================================== ANIMATIONS Everything should animate. Nothing static. Fade. Scale. Rotate. Parallax. Depth. Morphing. Spring animations. Elastic easing. Natural timing. 120fps-feeling smoothness. ====================================================== TECH STACK React Next.js Tailwind CSS GSAP Lenis Framer Motion Three.js React Three Fiber WebGL shaders Spline where appropriate Optimize for desktop first. Responsive for mobile. Maintain 60 FPS. ====================================================== LOADING EXPERIENCE Before the site loads, show a futuristic loading sequence. The logo assembles from glowing particles. Glass shards combine. Loading percentage. Energy pulse. Fade into the Hero video. ====================================================== FINAL OBJECTIVE The visitor should not feel like they visited a website. They should feel like they experienced a futuristic luxury automotive film that responds to their scrolling and mouse movements. Every section should surprise them. Every interaction should feel handcrafted. The final result should be worthy of Awwwards Site of the Day, FWA, CSS Design Awards, and feature-level quality.