HOLZER — Downhill-Manufaktur mit 3D-Inszenierung

(Auf einen Blick)

Leistungen

• Konzept, Corporate Identity & Umsetzung
• Scroll-gesteuerte Bildsequenzen (Canvas)
• 360°-Produktviewer für vier Modelle
• Produktseiten mit FLIP-Übergang & Anfrageformular
• Lastanalyse, Anlauffarben-Interaktion & Drohnenflug
• Bildwelt & Videos KI-generiert, Frames selbst aufbereitet
• Schriften lokal, Reduced-Motion-Fallback

Website und Modellshop für eine Titan-Carbon-Downhill-Manufaktur aus Tirol: Scroll-Sequenzen, 360°-Produktansichten und Animationen, die die Marke zum Leben erwecken.

HOLZER baut Downhillbikes aus Titan und Carbon in Tirol, limitiert auf 150 Rahmen pro Jahr, jeder nummeriert und signiert. Eine solche Marke verkauft keine Ausstattungsliste, sondern ein Gefühl: Präzision, Handarbeit, das Wissen, etwas Seltenes zu fahren. Unser Ansatz war deshalb eine Website, die diese Identität zum Leben erweckt und die Produkte mit 3D-Ansichten und modernen Animationen inszeniert. Die Seite ist öffentlich unter holzer-bikes.com erreichbar.

HOLZER ist ein Showcase-Projekt aus unserer Schmiede: Marke, Modelle, Preise und Kennzahlen haben wir für diese Seite entwickelt. Die Technik dahinter ist echt und läuft so live.

(01)

Identität statt Datenblatt

Bevor eine Zeile Code entstand, stand die Marke: ein schräggestelltes „H“ mit fallendem Querbalken, die „Falllinie“. Dazu Carbon-Schwarz, ein helles Titan-Grau und Molten Orange als Akzent, abgeleitet von Federn und Naben der Bikes. Die Signatur ist ein Verlauf aus echten Titan-Anlauffarben: Gold, Orange, Violett, Blau. Er taucht überall dort auf, wo etwas passiert, im Ladebalken, in der Lastanalyse, in Hover-Zuständen.

Typografisch arbeitet die Seite mit Geist für Headlines und Text, Geist Mono für technische Beschriftungen in Versalien und Michroma nur für die Wortmarke. Alle Schriften liegen lokal, es gibt keine Anfragen an Google Fonts.

(02)

Das Bike fällt, wenn du scrollst

Die Startseite öffnet auf dem Gravit™ vor schwarzem Grund. Mit dem ersten Scrollen gehen die Texte, und das Bike fällt: eine scroll-gesteuerte Bildsequenz aus 121 Frames, bis es in einer Staubexplosion landet. Die Frames liegen komprimiert im Speicher, decodiert wird nur ein Fenster um die aktuelle Position, außerhalb des Haupt-Threads. Deshalb ruckelt nichts, auch wenn jemand hastig scrollt.

(03)

Jedes Modell in 360°

Die vier Modelle laufen in einem horizontalen Slider. Fährt die Maus über eine Karte, dreht sich das Bike auf dem Drehteller. Ein Klick lässt die Karte zur Produktseite wachsen, und das Bike fliegt dabei exakt an seine neue Position, im selben Winkel, in dem es sich gerade befand. Auf der Produktseite lässt es sich per Ziehen, Wischen oder Pfeiltaste frei drehen, in Ruhe steht immer ein scharfes Bild.

Dahinter steckt Handarbeit an den Daten: Die Drehteller-Videos drehen nicht gleichmäßig schnell. Ein eigenes Skript schätzt deshalb den Winkel jedes Videobilds und wählt Frames, die gleichmäßig im Winkel liegen. So entsteht ein Viewer, der sich anfühlt wie ein echtes 3D-Modell.

Jede Produktseite hat eine eigene URL, Kennzahlen und Preis, technische Daten, eine Geometrie-Tabelle mit wählbarer Größe und ein Anfrageformular, das aus der Körpergröße eine Rahmengröße empfiehlt.

(04)

Technik, die sich selbst erklärt

Die Behauptung „steifer an den Knotenpunkten“ steht nicht als Text da, sie baut sich auf: Eine technische Zeichnung des Rahmens wird geplottet, eine Scan-Linie legt eine Stress-Map in den Anlauffarben frei, und die Knotenpunkte zählen hoch, bis 70 % erreicht sind.

Weiter unten öffnet sich ein „H“ als Maske, und durch sie hindurch fliegt eine Drohne über einen Grat bis zum Bike im Sonnenuntergang. Und wer auf „Mehr Hitze“ klickt, sieht das Titan in vier Stufen anlaufen, so wie es beim Schweißen wirklich passiert.

(05)

Navigation mit Vorschau

Das Vollbild-Menü zeigt oben die vier Modelle. Am Desktop erscheint beim Hovern eine Karte mit Bild und Preis, mobil gibt es Thumbnails. Ein Klick aufs Logo führt von überall zurück an den Anfang, über den Ladescreen, der sich wie beim ersten Besuch wieder öffnet.

(06)

Stückliste

Die Zahlen stammen aus der Live-Seite und lassen sich dort nachzählen.

(07)

Was das für dein Projekt heißt

Nicht jede Marke braucht eine Bildsequenz mit 121 Frames. Aber jede Marke hat etwas, das man zeigen statt beschreiben kann: ein Produkt, das man drehen will, ein Verfahren, das man sehen muss, eine Herkunft, die man spürt. Genau dort setzen wir 3D und Animation ein, gezielt und mit Rücksicht auf Ladezeit und Barrierefreiheit, nicht als Selbstzweck.

Wenn du ein Produkt hast, das mehr verdient als ein Foto auf weißem Grund, sprich mit uns über deine Website oder deinen Online-Shop.