Vanta

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.

What’s inside

• 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

The 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.

See it live

The demo is public: https://fpsjago.github.io/vanta/. 9 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.