Vanta

Vanta es una plantilla cinematográfica de lanzamiento EV para marcas de automoción, lanzamientos de hardware y microsites de producto único. Nueve archivos de ruta generan once páginas: la homepage tipo film de lanzamiento, una ficha técnica completa, un configurador de color 2D, un flujo de reserva de tres pasos, galería con lightbox, historia de marca, contacto, tres páginas legales desde una colección y un 404 in-character. La homepage está construida con siete arquetipos de sección distintos más una marquesina de specs, ninguno repite escala ni ritmo, incluyendo un design rail horizontal pinneado, un split-stat sticky y un interstitial de color-flood plasma. El hero Ignition ejecuta una secuencia enteramente GSAP sobre un render del GT servido primero como poster: las líneas del titular suben enmascaradas, un charge-path SVG traza la carrocería y un contador HUD sube de 0 → 412 km/h. Tres skins en vivo, incluido un light mode Studio de verdad. Astro 6, React 19, Tailwind v4, GSAP y Lenis.

Qué incluye

• 9 archivos de ruta que generan 11 páginas, Inicio, The GT, Configure, Reserve, Gallery, Story, Contacto, tres páginas legales desde la colección y un 404 SIGNAL LOST
• Hero Ignition, un timeline de GSAP eleva tres líneas de titular enmascaradas, traza un charge-path SVG sobre el coche vía strokeDashoffset y sube un HUD de 0 → 412 km/h
• Escenario de hero poster-sobre-video, el render AVIF/WebP del GT es la imagen LCP con carga eager y un loop mp4 ambiental en mix-blend screen detrás; el timeline de ignición corre al cargar y ScrollTrigger solo hace scrub de la salida en parallax del hero, así que ningún beat depende del currentTime del video
• 7 arquetipos de sección distintos en la homepage más una marquesina de specs, hero de ignición, acto de tipografía cinética, split-stat sticky, design rail horizontal pinneado, interstitial de color-flood plasma, collage editorial superpuesto y teaser del configurador
• Design rail horizontal pinneado, ScrollTrigger fija la sección y hace scrub del track de planchas en horizontal con una barra de progreso escalando en sincronía
• Configurador 2D de color/acabado, 4 trims (Obsidian, Carbon, Plasma, Bone) cambian el render, la muestra de pintura, el precio y la descripción con un cross-fade de medio segundo, sobre un escenario que orbita con el cursor. Sin WebGL ni 3D en vivo

La firma

El hero Ignition es una secuencia de arranque, no una imagen de cabecera. Un render AVIF estático del GT pinta primero como elemento LCP mientras un loop de energía ambiental se mezcla en screen por detrás; entonces toma el control un timeline de GSAP: tres líneas de titular enmascaradas suben en stagger, un charge-path SVG anima su strokeDashoffset hasta cero para que una línea de plasma recorra el largo del coche, y un contador HUD mono sube de 0 a 412 km/h. Cada beat lo mueve un timeline de GSAP en vez del currentTime del video, así que nunca se desincroniza entre navegadores; ScrollTrigger queda reservado para la salida en parallax del hero al hacer scroll, y con prefers-reduced-motion toda la secuencia se asienta al instante en el frame final, sin scrub alguno.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/vanta/. 9 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.