🔗 Live Demo: https://vanta-automotive.netlify.app/

Die meisten Automobil- und EV-Websites sehen immer noch aus wie eine digitale Broschüre: ein Heldenbild, eine Spezifikationsliste, ein Kontaktformular. VANTA basiert auf einer anderen Idee — kontrollierte Kraft, spürbar durch Bewegung. Anstatt Besuchern ein fertiges Auto zu zeigen, lässt es sie beobachten, wie eines entsteht: Fahrgestell, Antriebsstrang, Räder, Karosserie, Cockpit, Glas, die in Echtzeit beim Scrollen zusammengefügt werden, und ebenso reibungslos wieder rückwärts, falls sie nach oben scrollen. Es ist die Art von ersten Eindrücken, die einen Besucher stehen bleiben lässt und sagen lässt: „Moment mal, wie haben sie das gemacht?“ — und genau diese Reaktion ist der ganze Sinn.

Diese Zusammensetzungssequenz ist nur der Eröffnungsschachzug. Machine View folgt ihr mit einer filmischen Kamerareise um das fertige Fahrzeug über sieben Inspektionswinkel, mit interaktiven Hotspots, die bei Klick reale Ingenieursdetails sichtbar machen, plus freier Orbit-Steuerung auf Desktop für Besucher, die sich selbst umsehen möchten. Ein Aerodynamik-Flow-Abschnitt visualisiert, wie Luftströmung und Abhebe- bzw. Abdrückkräfte sich in niedriger Geschwindigkeit, im Cruising und bei hohen Geschwindigkeiten verändern. Und ein Live-Konfigurator ermöglicht Besuchern, Modell, Außenfinish, Räder, Innenraum und Ausstattung auszuwählen, wobei die Vorschau sofort aktualisiert wird — keine Seitenreloads, kein Warten. Um diese zentralen Erlebnisbereiche gruppiert sich eine komplette Website: eine Modellübersicht mit Detailseiten, eine Ingenieursaufgliederung, eine Technologieübersicht, ein vollständiges Journal mit Artikeln, ein Test-Drive/Kontakt-Flow und rechtliche Seiten — alles, was ein echter Launch benötigt, nicht nur ein Demo-Showreel.

Jedes Element davon ist darauf ausgelegt, besessen zu werden, nicht nur bewundert zu werden. Alle Fahrzeugnamen, Spezifikationen, Funktionen und Journal-Inhalte leben in einfachen, typisierten TypeScript-Daten-Dateien — füge ein Modell hinzu und die Seite /models/[slug] wird automatisch generiert, kein Routing-Code nötig. Farben, Schriftarten und das Logomark sind jeweils genau an einer einzigen Stelle definiert. Der Austausch durch dein eigenes 3D-Fahrzeug ist ein dokumentierter, Node-Mapping-Prozess statt eines vollständigen Neubaus von Grund auf. Es gibt kein CMS, mit dem man sich herumschlagen müsste, denn es gibt kein CMS: alles wird aus dem Quelltext kompiliert, also was im Code zu sehen ist, kommt auch aus dem Produkt.

Unter der Haube ist VANTA ein Next.js (App Router) + TypeScript-Projekt, gestylt mit Tailwind CSS v4, mit seinen 3D-Erlebnissen gebaut auf Three.js über React Three Fiber und drei, und seinen scroll-gebundenen Sequenzen gesteuert von GSAP ScrollTrigger und Framer Motion. Was du bekommst:

• Vollständiger, lesbarer Quellcode — nichts minimiert oder verschleiert

• Mobile-first responsives Layout, mit keyboard- und Screen-Reader-zugänglicher Navigation und Formularen

• Automatische, sanfte Rückfallebene zu einer vollständig zugänglichen statischen Präsentation, wenn prefers-reduced-motion aktiviert ist, WebGL nicht verfügbar ist oder ein 3D-Asset nicht geladen wird

• SEO-fertige Metadaten, Open-Graph-Tags und eine generierte Sitemap/robots-Datei

• Statische