Case · Eigenbau
Eine Schallplatte besteht nicht aus vielen Kreisen. Sie hat genau eine Rille. Diese eine Rille fällt unten aus der Platte, läuft als roter Faden an jedem Abschnitt entlang und wird am Seitenende zur Katze, die ins nächste Kapitel führt.
Ein Motiv, eine Datei, 74 KB, kein Framework. Was hier steht, sind die Entscheidungen dahinter und die Gründe dafür, inklusive der Fehler, die dazu geführt haben.
Die wichtigste Entscheidung
Der erste Anlauf war ein Scroll-Film über fünfzig Bildschirmhöhen. Technisch sauber gebaut und für den Zweck falsch: Bis ein Besucher zum ersten Mal etwas Konkretes erfuhr, musste er fünfzig Mal scrollen. Das macht niemand, der an einem Tag zwanzig Anbieter vergleicht.
Also wurde die Reihenfolge umgedreht. Zuerst der Effekt, der hält, dann die Sache, dann die Arbeit, dann der Kontakt. Nach zwanzig Sekunden soll jemand entscheiden können. Der Film liegt weiterhin da, jetzt als Angebot für die, die Zeit mitbringen.
Das ist die Regel, die ich auch auf Kundenseiten anwende: Aufmerksamkeit gewinnen und sie dann sofort einlösen. Ein Effekt, der zwischen Besucher und Information steht, kostet Anfragen. Ein Effekt, der den Blick hält und die Information gleich mitliefert, bringt sie.
Der Kern
Vorher lagen im Hero konzentrische Ringe. Sie sahen aus wie eine Platte, und sie waren gelogen. Was dort jetzt liegt, ist eine einzige archimedische Spirale, die von außen nach innen läuft. Ihr Ende landet exakt auf sechs Uhr, fällt dort senkrecht aus dem Hero und läuft unterhalb als roter Faden weiter, einseitig um jede Sektion, bis er am Seitenende zur Katze wird.
Der Nutzen davon ist nicht dekorativ. Der Faden ist die Orientierung: Er verbindet jede Sektion sichtbar mit der vorigen, führt den Blick über die ganze Länge und endet auf einem Link. Eine Seite, die aus einem Motiv besteht, muss ihre Teile nicht erklären.
Kurz vor dem Livegang fand ich auf dem Handy einen Fehler, den ich am Desktop übersehen hatte. Die Rille schien oben an der Platte zu starten und quer hindurchzuschneiden. Die Ursache: Der Gesamtwinkel der Spirale wurde vorab analytisch berechnet, die zeichnende Schleife lief aber einen leicht anderen Weg, und der letzte Punkt wurde deshalb nachträglich auf sechs Uhr gezwungen. Zwischen echtem Ende bei 301 Grad und erzwungenem Ende bei 90 Grad lagen 509 Grad Sprung, gezeichnet als gerade rote Sehne quer über die Platte.
Die Technik
Um die Maus liegt eine Blase mit 95 Pixel Radius. Was hineingerät, wird verdrängt: Der Kern schiebt die Rillen zur Seite wie ein Bug das Wasser, und die Linie, die es doch bis in die Blase schafft, krümmt sich stärker und sucht die andere Seite. Auch das Schwarz dazwischen bewegt sich mit.
Die erste Fassung hat die Linien unter der Maus lediglich vergrößert. Das sah aus wie ein Aufkleber, der sich hebt, und mein Urteil dazu war kurz: fake. Erst die dritte Iteration saß, kleiner und intensiver als die zweite.
Naiv gebaut kostet so etwas den Rechner das Genick. Anfangs wurden hunderte Ringe in jedem einzelnen Bild komplett neu berechnet, und die Maschine ging in die Knie. Der Fix kam aus einem Umdenken: Jede Umdrehung der Spirale liegt als fertiger Pfad im Speicher, die Nähe zur Blase wird analytisch bestimmt, und live verzerrt wird nur, was sie wirklich berührt. Von Ruckeln auf rund 160 Bilder pro Sekunde.
Handwerk
Fährt der Cursor über eine einfache Linie, entstehen an der Blase genau zwei Knicke. Die Verzerrung ist dann nur behauptet. Der Faden ist deshalb Catmull-Rom, umgerechnet in kubische Béziers, 559 Kurvensegmente, null Geradenstücke. Im Bereich der Blase werden die Punkte auf eine Dichte von fünf Pixeln verdichtet, dann verdrängt und als weiche Wölbung neu gezogen. Dieselbe Behandlung bekamen die Rillen der Platte und die Trennlinien im Prozess-Abschnitt.
Der Faden brauchte außerdem Platz. In der ersten Fassung lief er direkt über die ersten Buchstaben jeder Textzeile, nachgemessen vier Pixel Abstand. Er hat jetzt eine eigene Gasse aus asymmetrischem Padding. Auf dem Desktop sind es 41 Pixel Luft, und die Ausbuchtungen zeigen nach außen in die Gasse, nie zum Text. Dekoration darf nie im Weg stehen, wenn jemand liest.
Der Bug
Bei zwei verschiedenen Fensterbreiten lag der Faden plötzlich quer über einer Überschrift, und die Katze am Ende zerfiel zu Gekritzel. Der Grund: Der Sprachwechsel tauscht die Texte, andere Textlängen verschieben das Layout, aber der Faden wurde dabei nie neu berechnet. Er hing an der Geometrie der alten Sprache.
Der Fix stößt bei jedem Sprachwechsel den Neuaufbau an. Die erste Version lief über requestAnimationFrame, das in einem versteckten Tab nie feuert, deshalb ein Timeout. Danach gegengemessen bei exakt der Fensterbreite, bei der es aufgefallen war: null Berührungen mit Headline, Adresse und Absätzen.
Der Film
Wer mehr wissen will, bekommt eine Reise durch sechs Stationen. Kein Video-Element, sondern 1.230 Einzelbilder, die am Scrollbalken hängen. Der Besucher bestimmt das Tempo, vorwärts wie rückwärts, und kann jederzeit aussteigen.
Die teuerste Lektion steckt in einer einzigen Szene. Bei dieser Technik entscheidet nicht die Länge des Clips über die Ruhe, sondern das Verhältnis von Videosekunden zu Scrollweg. Eine Fahrt habe ich dreimal geschnitten. Zuerst lagen zwanzig Sekunden Video auf 232 Bildschirmhöhen, dazu war das Quellvideo hochkant und wurde stur auf Breitbild gezerrt. Beim zweiten Mal wählte ich eine ruhigere Stelle und spielte sie gleichzeitig schneller ab, was den Fehler verdoppelt hat. Erst der dritte Schnitt saß: 6,5 Sekunden auf derselben Strecke, dazu eine Stabilisierung gegen das Wackeln, das die halbe Hektik ausmachte.
Roh wog der Film 103 MB und war auf einer normalen Leitung eine Zumutung. Die Frames liegen jetzt als WebP bei 72 MB, geprüft gegen eine Qualitätsschwelle, die eine Stufe darunter nicht bestanden hätte. Wichtiger war die Ladelogik: Bis zum ersten Bild lädt die Seite 8,8 MB statt vorher 76 MB, der Rest kommt in Häppchen und nach Priorität nach, erst die Szene, in der du stehst, dann die nächste. Gedrosselt auf 4 Mbit/s getestet, ohne schwarze Löcher. Dieselbe Logik verhindert auf Kundenseiten, dass jemand vor einem leeren Bild wartet.
Navigation
Hinter der Katze liegt eine zweite Ebene: ein Netz aus Knoten, das die sechs Stationen verbindet. Lange war es eine Sackgasse, erreichbar nur nach dem kompletten Film. Jetzt ist es die Schaltzentrale. Fährst du über einen Knoten, kannst du diese Station einzeln ansehen, und der Film springt exakt an ihren Anfang. Alle sechs Sprünge sind nachgemessen, Abweichung null.
Die Daten dahinter sind echt und aus meinen eigenen Notizen exportiert, nicht erfunden. Ein Skript hat die Quellen gescannt, private Bereiche herausgefiltert und pro Station höchstens acht Einträge übernommen, sortiert nach Verknüpfungsgrad. Der Rest wäre Lärm gewesen.
Bewegung mit Feder-Physik statt linearer Interpolation: Die Knoten pendeln sich ein, die Nachbarn bekommen Schwung mit, und wer einen Knoten zieht, verschiebt das Netz dauerhaft ein Stück. Damit ist die Seite ein Kreis: Start, Film, Netz, einzelne Station, zurück. Wer nur Fakten will, ist in zwanzig Sekunden fertig. Wer neugierig ist, bleibt zehn Minuten.
Das Ende der Linie
Am Seitenende sitzt eine Katze im Profil. Ihr Schwanz schwingt vorne herum und wird selbst zur Auslauflinie, die rechts aus dem Bild geht. Sie ist der Link auf die zweite Ebene, das Label daneben sagt: Folg dem Faden. Ein Seitenende, das sonst nur Impressum wäre, wird damit zur Weiterführung.
Der Weg dahin war ein Umweg, und er ist die eigentliche Lehre. In einer früheren Fassung klebte ein freigestelltes Foto an dieser Stelle. Die Größe passte nicht zur Physik des Raums, und man sah die Kante. Die Katze, die jetzt dort sitzt, ist aus demselben Faden gezeichnet, der oben aus der Platte fiel. Kein Bild, keine Klebekante, dieselbe Linie. Elemente, die zum System gehören, wirken. Elemente, die man daraufsetzt, sieht man.
Ordnung
Nach dem Launch zerfielen die Seiten visuell. Nachgemessen war das kein Geschmacksproblem: Sechs Hero-Bereiche hatten sechs verschiedene Breiten, 972, 1045, 1111, 878, 1067 und 1320 Pixel. Der Grund ist ein klassischer Fehler. In einer Flex-Spalte zentriert eine automatische Außenkante nicht, das Element schrumpft stattdessen auf die Breite seines längsten Wortes. Dazu klebten die Textspalten am linken Rand, während die Bilder zentriert waren. Vier verschiedene Achsen auf einer Seite.
Ein Inventar über alle neun Seiten zählte 19 frei erfundene Breiten. Es gab längst eine saubere Skala für Schriftgrößen und nie eine für Breiten. Der Fix waren fünf Variablen und eine Zeile CSS für den Hero.
Danach kam die Messung, weil ein Blick dafür nicht genügt. Ein Skript prüft für jeden Block, ob links gleich viel Luft ist wie rechts: acht von acht Seiten sauber. Ein zweites fährt neun Seiten über fünf Fensterbreiten ab und sucht Überlauf und Konsolenfehler: 45 von 45 Punkten sauber. Fließtext bleibt dabei linksbündig, weil zentrierte Absätze ab der dritten Zeile die Lesekante zerstören. Mittig stehen nur kurze Aussagen und Überschriften.
Regeln
Die Rille endete rechnerisch bei 301 Grad und wurde auf 90 Grad gezwungen, weil sie dort aus der Platte fallen soll. Der Sprung dazwischen wurde als gerade rote Sehne quer über die Platte gezeichnet. Sichtbar war das nur auf dem Handy.
Zwölf Sekunden Video auf derselben Scrollstrecke, auf der vorher achteinhalb lagen, heißt mehr Bild pro Zentimeter und damit mehr Hektik. Ich habe eine Szene ruhiger geschnitten und dabei schneller gemacht.
Eine Recherche meldete siebzehn Videos als querformatig. Ein Kontaktbogen mit einem Bild pro Sekunde bewies: alle hochkant, mit Rotations-Flag. Beschreibungen kosten Zeit und irren. Die Bilder irren nicht.
In der Ausschlussliste des Deploys stand ein Bildordner als ungenutzt. Das stimmte, bis eine Unterseite Stunden zuvor genau von dort ihre sechs Boards zog. Der lokale Testserver liest diese Liste nicht. Live wären es sieben leere Kästen gewesen.
Zwei Unterseiten trugen noch Arbeitstitel aus der Bauphase. Solange sie auf noindex standen, war das egal. Mit dem Livegang wurden Arbeitsnotizen zu Schaufenstern in Google.
Ein Werkzeug zeigte in einer Datei Umlaut-Müll. Die Datei war gesund, es war nur die Anzeige. Ein reflexhafter Fix hätte sie doppelt kodiert und damit erst kaputt gemacht.
Zwei Sprachen
Neun Seiten zweisprachig, ohne Framework und ohne zweiten Seitenbaum. Der deutsche Text steht im HTML, die englische Fassung daneben im Attribut, ein gemeinsames Skript tauscht sie und sichert beim ersten Wechsel das Original. Wer die Seite mit englischem Browser öffnet, landet direkt auf Englisch. Kostenpunkt: eine Datei.
Für kleine Seiten ist das die günstigste Lösung, die es gibt. Kein zweites CMS, keine doppelte Pflege, keine Übersetzungs-Plugins, die bei jedem Update brechen.
Methodisch
Kein Framework, kein CDN, kein Build. Handgeschriebenes HTML, CSS und JavaScript, Canvas für die Platte, SVG für den Faden. Die Startseite ist eine Datei mit 74 KB. Das ist keine Ideologie. Es ist die Folge davon, dass jeder Effekt hier eigens gerechnet wird und keine Bibliothek diese Verdrängung mitbringt.
Für Kundenprojekte entscheide ich das anders, je nachdem, wer die Seite später pflegt. Was bleibt, ist die Haltung dahinter: keine Bibliothek für einen Effekt, den man in dreißig Zeilen selbst schreibt, und nichts einbauen, was ich nicht erklären kann.
Eigenes Haus, eigenes Tempo. Ein Kundenprojekt hat Deadlines und Budget, dieses hier hatte beides nicht. Nichts, was hier steht, ist ein Versprechen für dein Projekt. Es zeigt nur, was geht, wenn niemand bremst.
Schreib mir kurz, worum es geht, oder ruf an. Du bekommst eine ehrliche Einschätzung und einen Festpreis, bevor irgendetwas beginnt.
Projekt anfragen 0178 5802854