Axis

Sobre Este Template

Axis es una plantilla de lanzamiento de producto cinematográfico-técnica para vehículos eléctricos, hardware y dispositivos. Siete páginas cubren la historia del lanzamiento, una narrativa de diseño por capítulos, una ficha técnica completa con toggle Performance / Track Edition, un configurador en vivo con formulario de reserva, y un diario de updates de producción sobre una colección Markdown. El hero hace pin y scrubbea un video de producto fotograma a fotograma con el scroll mientras un clúster de cuatro instrumentos cuenta y se bloquea en acid lime, y el titular en Archivo Variable morfea sus ejes de weight y width según el progreso. Debajo, una galería horizontal con pin desplaza lateralmente siete fotos, y la página de reserva calcula precio en vivo entre tres variantes, seis pinturas, cuatro juegos de llantas, cuatro opciones y tres paquetes de servicio. Canvas grafito, cursor HUD, grano feTurbulence y fallbacks para pointer coarse en cada sección con pin.

Firma

El hero hace pin durante unos 3.2 viewports y scrubbea el currentTime de un video de producto directamente desde el progreso del scroll — el MP4 está codificado con keyint=1 para que cada fotograma sea un punto de seek, y un loop de rAF solo emite el seek cuando el delta supera un frame, evitando saturar el decoder. En ese mismo scrub, cuatro contadores suben y se bloquean en acid lime uno tras otro como un cuadro de instrumentos encendiéndose, un rail vertical se llena, y el titular Archivo morfea sus ejes de weight y width. Con pointer coarse o reduced motion cae a un loop en autoplay silenciado, con los contadores fijos y sin pin.

Características

• 7 páginas — Inicio, Diseño, Specs, Reserva, Updates, Detalle de update, 404
• Hero de video scrubbeado — ScrollTrigger hace pin de la sección y controla video.currentTime fotograma a fotograma
• Clúster de instrumentos — cuatro contadores suben y se bloquean en acid lime en checkpoints de scroll, escritos DOM-direct
• El titular en Archivo Variable morfea sus ejes wght y wdth según el progreso del scroll
• Galería horizontal con pin — el scroll vertical desplaza lateralmente siete fotos, con invalidateOnRefresh para que siempre encaje
• Configurador en vivo — 3 variantes, 6 pinturas, 4 juegos de llantas, 4 opciones y 3 paquetes de servicio con total en vivo
• Formulario de reserva con validación por campo, selector de región y resumen de depósito de $500 (solo estado de UI, sin backend)
• Ficha técnica completa con toggle Performance / Track Edition sobre tablas agrupadas de powertrain, batería, carga y chasis
• Cursor HUD de crosshair controlado por los atributos data-cursor y data-cursor-label en cualquier elemento
• Botones CTA magnéticos — atracción global con GSAP quickTo y strength configurable por botón
• Colección de contenido Updates — 3 entradas Markdown con schema Zod tipado y enum de categorías
• Página de historia de diseño — capítulos, momento de video, pull quote y desglose de materiales y proceso
• Smooth scroll con Lenis + Astro View Transitions con ciclo completo de kill/refresh de ScrollTrigger
• Fallbacks de reduced-motion y pointer coarse en cada sección con pin — loop autoplay en vez de scrub, overflow scroll nativo en vez de pin
• SEO — JSON-LD de Product, Open Graph, URLs canónicas, sitemap y robots.txt; 25 imágenes optimizadas a AVIF + WebP mediante un helper getImage() compartido
• TypeScript strict con noUncheckedIndexedAccess — cero any

Despliegue