Straßenverlauf im Passblock
Jeder Pass bekommt seine echte Route als Linie über dem Foto. Sie zeichnet sich beim Scrollen nach, Kehre für Kehre. Nach oben bleibt sie stehen, erst wenn der Block unten das Bild verlässt, setzt sie zurück.
Case Study
Cumo Drivers Club
Eine Website, die sich bewegt wie die Touren, für die sie steht.
Seit 2014 fahre ich mit dem Club über die Alpenpässe. 2026 habe ich die Website neu gebaut. Konzept, Design, Bewegung und Code aus einer Hand, mit einem klaren Ziel: Man soll das Fahren spüren, bevor man sich anmeldet.
- Rolle
- Gründer, Konzept, Design, Umsetzung
- Zeitraum
- Club seit 2014, Relaunch 2026
- Umfang
- Touren, Pass Guides, Shop, Sponsoring, Quiz
- Technik
- Vite, Vanilla JS, Canvas, ohne Framework
02
Die Frage
Wie zeigt eine Website, wie sich eine Passstraße anfühlt, ohne in Lifestyle Theater zu kippen?
Viele Anbieter verkaufen Sportwagentouren als Hochglanzreise. Der Club ist das Gegenteil: familiär, fair kalkuliert, das Fahren im Mittelpunkt. Die Seite sollte genau das ausstrahlen. Ruhig im Ton, präzise in der Bewegung, mit echten Fotos von echten Touren.
03
Eine Form für alles
Ich habe die Gestaltung aus dem Clublogo abgeleitet. Drei Dreiecke bilden dort die Bergsilhouette. Ein einzelnes davon wurde zum Zeichen der Marke: als Listenpunkt, aktiver Menüpunkt, Pfeil, Bildmaske und in jeder Signaturbewegung.
- Logo
- Bildmarke
- Dreieck 281 zu 239
-
Listenpunkt
Pfeil
Mosaik und Übergang
„Dunkel wie Sportwagenlack bei Nachtfahrt.“
- Eine AkzentfarbeRotbraun, nur für die Hauptaktion und kleine Dreiecke.
- Eine SchriftInter 900 in Versalien gegen ruhigen Fließtext.
- Scharfe KantenRadius null, schräg angeschnittene Bildkanten.
04
Bewegung als Signatur
Jede Bewegung erzählt vom Fahren. Keine ist Dekoration, jede hat einen Anlass und ein Ende.
1Ein Dreieck unter dem Logo
2Raster aus 110 px Zellen wächst radial
3Finale: die Mitte deckt alles
4Ein Dreieck formt die Textfläche
5Headline und Text erscheinen
Dreiecksmosaik beim Laden
Ein Canvas legt ein Raster aus Dreiecken über das Bühnenfoto und zeigt das Bild nur darin. Das Mosaik wächst mit 920 px pro Sekunde vom Logo aus, pulsiert, schließt sich und gibt die Bühne frei. Danach formt ein einzelnes Dreieck die schräge Fläche für die Headline. Dieselbe Mechanik deckt beim Seitenwechsel den Bildschirm ab, so schließt sich der Kreis von Seite zu Seite.
Konvoi im Tagesprogramm
Das Tagesprogramm ist eine Straße. Vier freigestellte Autos aus dem Club fahren die Mittellinie hinunter, weichen jedem Tag in einer weichen Kurve aus und lenken dabei mit. Die Mittellinie läuft wie eine Fahrbahn.
Dreieck im Button
Unter dem Zeiger wächst ein Dreieck aus der Mitte über die Fläche hinaus und wird zum vollen Rechteck. 380 ms hinein, 220 ms zurück.
Logo mit Schriftring
Unter dem Zeiger beschleunigt der Ring mit Trägheit und rastet beim Verlassen auf die volle Umdrehung zurück. Mobil und in der Fußzeile dreht er dauerhaft, 20 Sekunden pro Runde.
0
01234
012345678
0123456
012
0123456789
Seitenaufrufe, Beispielwert
Kilometerzähler
Die Seitenaufrufe in der Fußzeile rollen wie im Kombiinstrument auf. Die rechte Stelle startet zuerst, jede weitere läuft etwas länger.
Dazu kommen Reifenrauch aus zwei Canvas Ebenen im Tourenraster und in der Fußzeile, eine Laufschrift, deren Buchstaben das Foto füllt, und klebende Scrollbühnen für den Gründer und die Sponsoren Fallstudie.
05
Eine Bewegungssprache
Schnell, präzise, nie hektisch. Und jederzeit abschaltbar.
Bewegung bekommt bei mir dieselben Regeln wie Farbe und Schrift. Zwei Kurven, drei Dauern, ein Versatz für Geschwister. Alles als Token, nichts als fester Wert im Code. Bei reduzierter Bewegung zeigt jede Signatur sofort ihren Endzustand.
ease out
0.22, 1, 0.36, 1 · alles, was reagiert oder erscheint
ease drive
0.16, 1, 0.3, 1 · Fahrbewegungen und Layoutwechsel
- 180 ms Farbe, Pfeil
- 380 ms Leisten
- 680 ms Einblenden
Drei Dauern
Geschwister versetzt in Stufen von 80 ms
- Ohne BibliothekVanilla JS mit requestAnimationFrame und IntersectionObserver.
- Spart RechenzeitSchwere Animationen starten im Leerlauf und pausieren außerhalb des Bilds.
- Touch ohne UmwegHover nur auf Geräten mit Zeiger, damit iOS keinen zweiten Tap braucht.
06
Design System
Das System spiegelt den Code der Website: ein Tokenblock für Farbe, Schrift, Abstand und Bewegung, dazu 49 Bausteine von der Kopfzeile bis zum Passblock. Neue Seiten entstehen aus diesen Bausteinen. In einer Konsistenzprüfung habe ich 15 Befunde gefunden und alle entschieden.
Ein neuer Baustein entsteht erst, wenn kein vorhandener passt.
Farben
- bg#111111
- bg 2#1C1C1C
- bg 3#252525
- fg#FAFAFA
- accent#9E2600
Lass uns gemeinsam Kurven erleben.
Inter 900 in Versalien, Fließtext 400.
Stilfser Joch
- Länge
- ~24 km
- Passhöhe
- 2.757 m
- Kehren
- 48
- 4*Hotel mit Halbpension
- Tourguide mit Lead Fahrzeug
- Digitales Roadbook pro Fahrtag
07
Technik
Kein Framework, keine Animationsbibliothek. Jede Bewegung ist selbst geschrieben.
Die Seite läuft mit Vite und Vanilla JS. Mosaik und Reifenrauch rechnen auf Canvas, Routen liegen als SVG vor, Fotos als WebP in mehreren Größen. Die Pass Guides entstehen aus Quelldateien per Build Skript. Statistik läuft ohne Cookies. Getestet wird mobil bei 375 px.
08
Ergebnisse
30+
Touren seit 2014
62
Mitglieder aus Deutschland, Österreich und der Schweiz
+292 %
Impressionen bei Google, Juli bis Oktober 2026
Im Schnitt steht der Club bei Google auf Seite eins, für „geführte Sportwagentouren“ auf Position 6. Den Zuwachs tragen vor allem die Pass Guides: Wer seine nächste Alpentour plant, landet beim Club.
09
Learnings und Ausblick
- 1Eine einzige Form trägt eine Marke, wenn sie überall konsequent auftaucht.
- 2Bewegung braucht Tokens wie Farbe und Schrift, sonst zerfällt sie.
- 3Reduzierte Bewegung ist ein zweiter Endzustand und muss genauso gut aussehen.
Als Nächstes wachsen die Pass Guides. Jeder Pass bekommt seinen Straßenverlauf, seine Fakten und seine Geschichte aus Fahrersicht.
Eine Website, die sich so bewegt, wie sich deine Marke anfühlt?
Lass uns darüber sprechen.