🔗 Demo en vivo: https://vanta-automotive.netlify.app/

La mayoría de las webs de automoción y de vehículos eléctricos siguen pareciendo un folleto digital: una foto principal, una ficha técnica, un formulario de "contacto". VANTA parte de otra idea: poder controlado, que se siente a través del movimiento. En lugar de enseñar a los visitantes un coche terminado, les deja ver cómo se construye uno: chasis, tren motriz, ruedas, carrocería, habitáculo y cristales se ensamblan en tiempo real mientras hacen scroll, y se desmontan con la misma suavidad si vuelven hacia arriba. Es el tipo de primera impresión que hace que el visitante se detenga y diga "espera, ¿cómo han hecho eso?", y esa reacción es justo el objetivo.

Esa secuencia de ensamblaje es solo el primer movimiento. Machine View la continúa con un recorrido de cámara cinematográfico alrededor del vehículo terminado, con siete ángulos de inspección y puntos interactivos que muestran detalles reales de ingeniería al hacer clic, además de control de órbita libre en escritorio para quienes quieran mirar por su cuenta. Una sección de Aerodynamic Flow visualiza cómo cambian el flujo de aire y la carga aerodinámica en los estados de baja velocidad, crucero y alta velocidad. Y un configurador en vivo permite elegir modelo, acabado exterior, llantas, interior y molduras, con la vista previa actualizándose al instante, sin recargar la página ni esperar. Alrededor de estas experiencias centrales hay un sitio completo: una gama de modelos con páginas de detalle, un desglose de ingeniería, un resumen de tecnología, un blog completo con artículos, un flujo de prueba de manejo/contacto y páginas legales: todo lo que necesita un lanzamiento real, no solo un vídeo de demostración.

Todo está pensado para que sea tuyo, no solo para admirarlo. Todos los nombres de vehículos, especificaciones, características y contenidos del blog viven en archivos de datos TypeScript simples y tipados: añade un modelo y su página /models/[slug] se genera automáticamente, sin tocar código de rutas. Los colores, las fuentes y el logotipo se definen cada uno en un solo lugar. Cambiar por tu propio vehículo 3D es un proceso documentado de mapeo de nodos, en lugar de reconstruir desde cero. No hay un CMS con el que pelearse porque no hay ningún CMS: todo se compila desde el código fuente, así que lo que ves en el código es lo que se publica.

Por dentro, VANTA es un proyecto de Next.js (App Router) + TypeScript, con estilos de Tailwind CSS v4, con sus experiencias 3D construidas sobre Three.js mediante React Three Fiber y drei, y sus secuencias ligadas al scroll impulsadas por GSAP ScrollTrigger y Framer Motion. Esto es lo que obtienes:

• Código fuente completo y legible, sin minificar ni ofuscar

• Diseño adaptable con enfoque móvil primero, con navegación y formularios accesibles por teclado y lector de pantalla

• Alternativa automática y elegante a una presentación estática totalmente accesible cuando se activa prefers-reduced-motion, WebGL no está disponible o falla la carga de un recurso 3D

• Metadatos listos para SEO, etiquetas Open Graph y un archivo sitemap/robots generado

• Generación estática de todas las páginas de modelos y del blog para un alojamiento rápido y económico

• La Guía del cliente y la Guía de personalización incluidas en esta descarga, que cubren paso a paso la instalación, los temas, la edición de contenido y el despliegue