Steindl Metallverarbeitung
Ein Zerspanungsbetrieb, der Einzelteile ab Stückzahl 1 fertigt. Erklärt an einem Bauteil, das sich beim Scrollen in seine Bearbeitungsschritte zerlegt.
Live-Website ansehen (öffnet in neuem Tab)
- Steindl Metallverarbeitung GmbH
- Durlangen bei Schwäbisch Gmünd
- Neugestaltung einer Unternehmenswebsite
- 2026
- Next.js, Three.js, GSAP
- Online
Ausgangslage und Ziel
Die bisherige Website lief auf einem Baukastensystem und zeigte keine eigenen Aufnahmen aus der Fertigung.
Die Aufgabe: Ein Einkäufer soll in Sekunden sehen, was gefertigt wird, und ein Teil samt Zeichnung anfragen können.
Konzept
Die Website spricht die Sprache der technischen Zeichnung: Schriftfeld, Maßlinien, scharfe Kanten und das Blau aus dem Firmenlogo.
Statt austauschbarer Stockfotos entstehen die zentralen Bilder im Code. Sie sind als Beispielgeometrie gekennzeichnet und behaupten nichts, was der Betrieb nicht belegt.
Ein Bauteil erklärt den Betrieb
Im Einstieg dreht sich ein Dreh-Fräs-Teil, zeigt Bohren, Drehen, Fräsen und Gewinde, zerlegt sich in Schichten samt Werkzeugbahn und schließt sich wieder.
Reverse Engineering in sechs Schritten
Vom vorhandenen Teil über 3D-Scan und CAD-Modell bis zum fertigen Nachbau. Das 3D-Teil durchläuft die Schritte, und jeder lässt sich per Klick ansteuern.
Maschinenpark zum Durchsuchen
Zehn Maschinen und Verfahren in vier Kategorien, mit Detailansicht, Beispielteil und gezeichnetem Arbeitsraum.
Anfrage mit Zeichnung
Das Formular nimmt bis zu fünf Dateien an (PDF, STEP, DXF, DWG und Bilder) und funktioniert auch ohne JavaScript.
- 3D-Bauteil, vollständig im Code erzeugt
- Maschinenpark zum Filtern und Durchsuchen
- Anfrageformular mit Zeichnungs-Upload
Technik
- Next.js 16 und React 19, öffentliche Seiten statisch gerendert
- Three.js direkt, ohne Modell-Dateien: Die Geometrie entsteht im Code
- GSAP mit ScrollTrigger, erst bei Bedarf nachgeladen
- Deutsch und Englisch mit übersetzten Adressen
- Playwright-Tests in Chromium, Firefox ohne WebGL, WebKit und mobil