VERTAX Industries
Industrie-Website mit scrollgesteuertem
Fertigungsfilm und digitalem Assistenten

Projektüberblick

VERTAX Industries ist ein Fertigungsbetrieb für Präzisionszerspanung — Fräsen, Drehen, Prototyping, Serienfertigung und Engineering für Kunden aus Automotive, Luftfahrt, Medizintechnik und Maschinenbau. Der Betrieb existiert nicht: Marke, Zahlen und Maschinenpark wurden vollständig entworfen.

Diese Entscheidung ist der Kern des Projekts. Ein als echt getarntes Referenzprojekt könnte höchstens beweisen, dass sich eine Website bauen lässt. Ein offen deklariertes beweist, dass sich ein ganzes Unternehmen entwerfen lässt — Positionierung, Sprache, Zahlenwerk und Bildwelt eingeschlossen.

Deshalb trägt die Seite eine eigene Konzeptseite, auf der jede markenbezogene Aussage in eine von drei Klassen einsortiert ist: nachprüfbar, entworfen oder erfunden. Was ein Interessent daraus mitnimmt, ist nicht die Einordnung selbst, sondern die Arbeitsweise dahinter.

• 20 Seiten je Sprache, Deutsch und Englisch gleichwertig
• Leistungen, Branchen, Maschinenpark, Qualität und Kontakt als eigene Ebenen
• Eigene Konzeptseite, die Entworfenes von Nachprüfbarem trennt
• Kein Kontaktformular in diesem Stand — die Kontaktseite nennt Wege, sie nimmt nichts entgegen
• Rechtstexte und Anbieterkennzeichnung von BTECH SOLUTIONS verantwortet

Der scrollgesteuerte Fertigungsfilm

Das Herzstück der Startseite ist ein Film, der nicht abgespielt, sondern gescrollt wird. Er folgt einem einzigen Bauteil durch acht Kapitel: von der Halle vor Schichtbeginn über das Aufspannen des Rohblocks und den Schnitt bis zur Messung und zum Versand. Das Scrollrad ist der Transportmechanismus — wer anhält, hält das Bild an.

Technisch ist das kein Video, sondern eine Bildfolge, die Einzelbild für Einzelbild auf ein Canvas gezeichnet wird. Das ist der einzige Weg, eine Bewegung exakt an die Scrollposition zu koppeln, ohne dass sie beim Zurückscrollen stockt. Die Bilder liegen als WebP in Auflösungsstufen vor und werden nur in der Stufe geladen, die das Gerät wirklich braucht.

Weil eine Bildfolge für Suchmaschinen kein Text ist und für einen Screenreader gar nichts, steht direkt darunter dieselbe Geschichte als Fließtext: dieselben acht Schritte zum Lesen statt zum Scrollen, jeder mit einer Verlinkung in die passende Leistungsseite. Der Film ist damit die Inszenierung, nicht der Träger der Information.

Für Besucher, die im Betriebssystem reduzierte Bewegung eingestellt haben, greift die Bildfolge nicht — sie bekommen ruhige Standbilder statt einer scrollgetriebenen Animation.

• Acht Kapitel vom Rohblock bis zur Palette, an die Scrollposition gekoppelt
• Bildfolge auf Canvas statt Video — rückwärts genauso flüssig wie vorwärts
• WebP-Bildfolgen in Auflösungsstufen, gerätegerecht nachgeladen
• Vollständige Textfassung derselben acht Schritte unter dem Film
• Standbild als Vorschau, damit der erste Bildaufbau nicht auf die Bildfolge wartet
• Respektiert die Systemeinstellung für reduzierte Bewegung

Der digitale Assistent

Unten rechts steht eine Figur, die durch die Seite führt. Sie meldet sich nicht ungefragt zu Wort, sie blockiert nichts und sie stellt sich nicht in den Weg — sie ist ansprechbar, wenn ein Besucher sie anspricht, und bietet einen Rundgang durch die Seite an.

Die Figur ist die digitale Darstellung von Benjamin Tietz, dem Herausgeber der Studie, mit erteilter Freigabe verwendet. Das ist eine bewusste Entscheidung: Die Alternative wäre eine erfundene Person für ein erfundenes Unternehmen gewesen — eine Erfindung mehr, als die Arbeit braucht. Entsprechend steht die Zuordnung sichtbar an der Figur, nicht im Kleingedruckten.

Gebaut ist der Assistent als Erweiterung, nicht als Voraussetzung. Ohne JavaScript bleibt an derselben Stelle ein gewöhnlicher Link zur Kontaktseite stehen — beschriftet, bedienbar und mit einem sinnvollen Ziel. Erst wenn die Seite im Browser lebendig wird, wächst aus diesem Link die Figur mit ihren Videozuständen.

Die Zustände sind kurze, tonlose Videoschleifen, die je nach Situation gewechselt werden, statt eine einzige Endlosschleife laufen zu lassen. Vorgeladen wird nichts: Solange niemand die Figur anspricht, kostet sie ein Standbild.

• Auf Ansprache statt aufdringlich — kein automatisch aufspringendes Fenster
• Ohne JavaScript ein beschrifteter Link zur Kontaktseite, kein toter Knopf
• Kurze, tonlose Videozustände statt einer durchlaufenden Schleife
• Nichts wird vorgeladen, bevor die Figur gebraucht wird
• Sichtbare Zuordnung der dargestellten Person direkt an der Figur
• Über Tastatur bedienbar, mit angesagtem Öffnungszustand

Architektur, Tempo & Datensparsamkeit

Alle 40 Seiten werden beim Bauen zu fertigem HTML vorgerendert und liegen danach als statische Dateien auf dem Server. Wer die Seite aufruft, bekommt den Text, bevor irgendein Skript gelaufen ist — für Suchmaschinen wie für Besucher mit langsamer Verbindung derselbe Vorteil.

Die Seite lädt nichts von Dritten: keine Analyse, keine Karten, keine externen Schriften, keine Einbettungen. Das ist keine Absichtserklärung, sondern nachgemessen — beim Aufruf der Startseite gingen 32 Anfragen an genau einen Host, die eigene Domain. Ein automatischer Test bricht den Build ab, sobald eine Anfrage die eigene Domain verlässt.

Dass die Seite trotz Bildfolgen-Film und Videofigur nichts verschiebt, ist der aufwendigere Teil: Jeder Platz, der später gefüllt wird, ist vorher reserviert. Der gemessene CLS-Wert liegt bei 0, der größte Bildaufbau bei 0,8 Sekunden.

Das Designsystem arbeitet mit gestaffelten CSS-Ebenen und Farbtokens im OKLCH-Raum — Farben lassen sich damit in gleichmäßigen Helligkeitsschritten ableiten, statt einzeln festgelegt zu werden. Es ist als eigene, gebaute Seite dokumentiert und nicht nur als Absprache.

• 40 vorgerenderte Seiten, ausgeliefert als statisches HTML
• 0 fremde Hosts — durch einen Test im Build erzwungen, nicht nur zugesagt
• Lighthouse Desktop 98 / 100 / 100 / 100, gemessen an der Live-Demo
• CLS 0 und 0,8 s bis zum größten Bildaufbau
• Selbst gehostete Schriften, geladen als reduzierter Zeichensatz
• Farbsystem in OKLCH, dokumentiert als gebaute Designsystem-Seite

Was ein echtes Projekt davon übernimmt

Der Wert dieser Studie liegt darin, dass nur die Inhalte erfunden sind — nicht die Struktur, in der sie stehen. Kennzahlen liegen als Daten, Sätze als Texte, Marke und Farbwelt als eine Konfiguration. Dieselbe Codebasis trägt einen echten Betrieb, sobald Marke, Zahlen und Texte ausgetauscht sind.

Genau deshalb ist die Liste des Erfundenen auf der Konzeptseite so ausführlich: Sie ist zugleich die Übergabeliste eines realen Auftrags. Was dort steht, ist das, was ein Betrieb aus seinen eigenen Unterlagen beisteuert — alles andere steht bereits.

Mehrere Regeln sind dabei nicht als Vorsatz, sondern als Prüfung im Build verankert: Ein Zertifizierungsname darf nicht in die maschinenlesbaren Daten geraten, weil ein Maschinenleser den relativierenden Zusatz nicht mitliest. Eine Personendarstellung wird ohne hinterlegte Freigabe nicht ausgeliefert. Und die Geometrie des Markenzeichens ist aus Zahlen berechnet und durch Tests festgehalten, damit ein geändertes Logo kein veraltetes Symbol im Browser-Tab zurücklässt.

Für einen Fertigungsbetrieb, der heute mit Datenblättern und einem Kontaktformular im Netz steht, ist das der eigentliche Unterschied: eine Seite, die den Prozess zeigt, statt ihn zu behaupten — und die belegt, woher jede Zahl darauf stammt.

• Kennzahlen als Daten, Texte als Inhalte, Marke als Konfiguration
• Sprachfassungen gleichwertig aufgebaut, nicht nachträglich übersetzt
• Prüfungen im Build statt Absprachen: Zertifikatsnamen, Personenfreigabe, fremde Hosts
• Markenzeichen aus Zahlen berechnet und durch Tests abgesichert
• Austausch von Marke, Zahlen und Texten ohne Eingriff in die Architektur