Vanta

Sobre Este Template

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.

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.

Características

• 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
• Traspaso del configurador a Reserve mediante el query param ?trim=, de forma que la configuración elegida llega al flujo de reserva
• Flujo de reserva de tres pasos con validación por campo, estados de error y foco movido al encabezado de cada paso para usuarios de teclado y lectores de pantalla
• Envío real del formulario a PUBLIC_FORM_ENDPOINT con estados de éxito, error de servidor y fallback in-page
• 3 skins conmutables en vivo desde el nav y persistidos en localStorage — Midnight (por defecto), Carbon y Studio, un light mode real de tinta sobre hueso con su propio plasma que cumple AA
• Galería con lightbox manejable por teclado — bloqueo de scroll del body, Escape para cerrar y flechas para avanzar entre tomas
• 3 colecciones de contenido con el glob loader de Astro — gallery (9 tomas), story (4 capítulos), legal (3 documentos)
• Ficha técnica completa y stats clave alimentadas desde un único archivo src/data/gt.ts — powertrain, prestaciones, batería y carga, chasis — con reveals de contador
• Pipeline de imágenes AVIF + WebP con el servicio sharp de Astro, calidad/effort ajustados y variantes srcset para móvil
• Grano de película generativo con feTurbulence SVG que cambia de blend mode y opacidad según el skin, para que ninguna superficie se vea plana
• WCAG AA en los tres skins — skip link, anillos focus-visible, dígitos HUD tabulares y prefers-reduced-motion respetado con poster estático y sin scrub

Despliegue