Case /05 · 2026
Kiwi
Eine Woche, die sich bewegt wie ein Cypher. Eine Seite, drei Kurse, kein Umweg zwischen den Tanzenden und dem Anmeldeknopf.
Gegeben
Drei Kurse, zwei Studios, und eine Anmeldung, die niemand fand.
Kevin unterrichtet an drei Abenden pro Woche Hip-Hop in zwei Zürcher Studios. Eine eigene Website hatte er nie: Wer mitmachen wollte, musste das richtige Formular auf der richtigen Studio-Website suchen. Viele gaben auf, bevor sie angefangen hatten.
- /aDie Seite hat genau eine Aufgabe: die Anmeldung offensichtlich machen. Ein Tap pro Kurs.
- /bKein Bildmaterial, kein Budget für ein Shooting, und ein Startfenster von Tagen statt Monaten.
- /cSie muss die Energie eines Cyphers tragen.
Beweis
Die Wortmarke ist das Fenster. Der Hero zeigt KIWI als Maske: Das Video liegt nur innerhalb der Buchstaben, das W in Signalorange. Beim Scrollen zoomt die Kamera durch den Stamm des I, bis das Bild den ganzen Raum einnimmt. Bei dieser Zoomtiefe steigen Browser bei Font-Glyphen aus, also stecken die Buchstabenkonturen als rohe Pfade im SVG: exakte Geometrie, pixelgenauer Endpunkt.
/02
Die Woche ist ein einziger horizontaler Streifen.
DIE WOCHE ist eine fixierte, scroll-gesteuerte Strecke: Die drei Kurse kommen nacheinander wie Beats, jeder mit seinem eigenen übergrossen Anmeldeknopf. Jeder Kurs ist von überall auf der Seite in zwei Interaktionen erreichbar. Das Budget für grosse Gesten ist hier aufgebraucht, der Rest der Seite bleibt ruhig.
Die Woche, horizontal gescrubbt. Die Anmeldung ist nie mehr als einen Blick entfernt.
/03
Wie die Bildwelt ohne Shooting entstand
Die ganze Bildwelt lebt in einem festen System: Tiefschwarz, Beton, ein einziges Signalorange. Die zentrale Regieentscheidung: Der Tänzer wird immer von hinten gefilmt. Das gibt der Marke Mystik und hält den Blick auf der Bewegung. Energie fliesst als Lichtspur durch die Silhouette.
Auf dem Handy fällt das Video ganz weg: ein Standbild im Hochformat, per Outpainting aus demselben Frame erweitert.
Q.E.D.
- /01Von null auf live in unter einer Woche, ohne bestehende Website als Grundlage.
- /02Eine HTML-Datei, keine Build-Pipeline. Eine Änderung im Stundenplan ist eine Textänderung.
- /03Jeder Kurs von jedem Punkt der Seite in zwei Interaktionen erreichbar.
- /04Vollständige Fallbacks: Reduced Motion, kein JavaScript, Video nur auf dem Desktop.