Vanta

About This Template

Vanta is a cinematic EV-launch template for automotive brands, hardware launches, and single-product microsites. Nine route files render eleven pages: the launch-film homepage, a full spec sheet, a 2D color configurator, a three-step reservation flow, a gallery with lightbox, brand story, contact, three legal pages from a collection, and an in-character 404. The homepage is built from seven distinct section archetypes plus a single spec marquee — no two repeat their scale or rhythm — including a horizontally pinned design rail, a sticky split-stat, and a plasma color-flood interstitial. The Ignition hero runs an entirely GSAP-driven sequence over a poster-first GT render: masked headline lines rise, an SVG charge-path traces the body, and a HUD counter climbs 0 → 412 km/h. Three live skins, including a genuine Studio light mode. Astro 6, React 19, Tailwind v4, GSAP, Lenis.

Signature

The Ignition hero is a launch sequence, not a hero image. A static AVIF render of the GT paints first as the LCP element while an ambient energy loop screen-blends behind it, then a GSAP timeline takes over: three clip-masked headline lines rise in staggered succession, an SVG charge-path animates its strokeDashoffset to zero so a plasma line traces the length of the car, and a mono HUD counter climbs from 0 to 412 km/h. Every beat is driven by a GSAP timeline rather than the video's currentTime, so it never desyncs across browsers; ScrollTrigger is reserved for the hero's parallax exit as you scroll away — and under prefers-reduced-motion the whole sequence settles instantly into the finished frame with no scrubbing at all.

Features

• 9 route files rendering 11 pages — Home, The GT, Configure, Reserve, Gallery, Story, Contact, three Legal pages from the collection, and a SIGNAL LOST 404
• Ignition hero — a GSAP timeline raises three clip-masked headline lines, traces an SVG charge-path across the car via strokeDashoffset, and counts a HUD readout 0 → 412 km/h
• Poster-over-video hero stage — the AVIF/WebP GT render is the eager LCP image with an ambient mp4 loop screen-blended behind it; the ignition timeline runs on load and ScrollTrigger only scrubs the hero's parallax exit, so no beat is ever tied to the video's currentTime
• 7 distinct homepage section archetypes plus one spec marquee — ignition hero, kinetic-type act, sticky split-stat, horizontal pinned design rail, plasma color-flood interstitial, editorial overlap collage, and configurator tease
• Horizontal pinned design rail — ScrollTrigger pins the section and scrubs a plate track sideways with a progress bar scaling in sync
• 2D color/trim configurator — 4 trims (Obsidian, Carbon, Plasma, Bone) swap the render, the paint swatch, the price and the spec blurb with a half-second cross-fade, over a stage that orbits with the cursor. No WebGL, no live 3D
• Configurator → Reserve handoff via a ?trim= query param, so the chosen build carries into the reservation
• Three-step reservation flow with per-field validation, error states, and focus moved to each step's heading for keyboard and screen-reader users
• Real form submission to PUBLIC_FORM_ENDPOINT with success, server-error, and in-page fallback states
• 3 skins switched live from the nav and persisted in localStorage — Midnight (default), Carbon, and Studio, a genuine ink-on-bone light mode with its own AA-safe plasma
• Gallery with a keyboard-driven lightbox — body scroll lock, Escape to close, arrow keys to step through shots
• 3 content collections via Astro's glob loader — gallery (9 shots), story (4 chapters), legal (3 documents)
• Full spec sheet and key stats driven from a single src/data/gt.ts file — powertrain, performance, battery and charging, chassis — with count-up stat reveals
• AVIF + WebP image pipeline through Astro's sharp service with tuned quality/effort and mobile srcset variants
• Generative SVG feTurbulence film grain that changes blend mode and opacity per skin, so no surface reads flat
• WCAG AA across all three skins — skip link, focus-visible rings, tabular HUD digits, and prefers-reduced-motion honored with a static poster and no scrubbing

Deployment