Vielleicht ist dir die Farbe aufgefallen. An jeder Tintenkante dieser Website wachsen Tropfen, die sich füllen, schwer werden, sich zu einem Faden ziehen und abreißen – genau wie an jedem Logo in der Leiste der Marken, für die wir arbeiten. Die Tropfen landen auf allem, was unter ihnen liegt (einem Foto, einer Karte, einem Button), und klatschen auf. Auf einer flachen Oberseite bleiben sie liegen. Auf einer schrägen rutschen sie, laufen über die Kante, die Seite hinunter und tropfen weiter. Am Ende landet alles in einer Pfütze auf dem Footer, die steigt, solange du bleibst.
Unser Logo ist ein Tropfen, also musste die Website tropfen. Kein Video in Dauerschleife, sondern echte Farbe, live in deinem Browser berechnet. Gebaut haben wir das mit Claude Code, wie man es von einer Agentur erwartet, die KI aufs Firmenschild schreibt. Tropfen auf den Bildschirm zu bringen war der leichte Teil. Sie so gut zu machen, dass man sie auf einer Live-Website laufen lassen kann, war die eigentliche Arbeit – und genau darum geht es in dieser Notiz.
Farbe, die weiß, wo sie ist
Jeder Tropfen ist ein kleines Physikspielzeug. Farbe sammelt sich im Tropfenkopf, der Kopf wird schwerer, und je schwerer er wird, desto schneller läuft der Tropfen weiter, bis er sich einschnürt und abreißt. Ein fallender Tropfen liest die echte Kontur von allem, was er trifft, abgerundete Ecken und schräge Fotos inklusive – Farbe auf einem runden Button schmiegt sich also an den Button. Auch die Seite selbst spürt er. Wisch beim Scrollen mit Schwung, und hängende Tropfen werden abgeschüttelt. Fahr auf der Startseite mit der Maus über ein Logo, und es hebt sich – die Farbe darauf hebt sich mit.
Bevor irgendwas davon auf die Live-Website durfte, musste es vier Regeln befolgen:
- Nie im Weg. Es darf keinen Klick blockieren, keinen Text verdecken und die Seite nicht ausbremsen.
- Stillhalten, wenn gewünscht. Wenn dein Gerät reduzierte Bewegung anfordert oder JavaScript aus ist, bekommst du die Seite im Ruhezustand, mit aufgemalten Tropfen.
- Flache Farbe. Scharfe Kanten und derselbe kleine Glanz wie im Logo. Kein Blur, keine Verläufe.
- Schläft, wenn sich nichts bewegt.
Wo es knifflig wurde
Zuerst mal: alles Runde. Die meisten dieser Logos sitzen in pillenförmigen Buttons, und Farbe kriecht nur zu gern um deren runde Enden. Genau dort wuchsen den Tropfen plötzlich spitze Zacken, als hätte jemand sie mit der Schere zurechtgestutzt. Der Code, der einen hängenden Tropfen zeichnete, ging davon aus, dass die Fläche darüber flach ist. Unten an der Pille stimmt das. In der Rundung zeichnete er einen Keil den Hang hinauf und einen schmalen Farbstreifen quer über den Button selbst. Die Lösung: Die Farbe trifft auf beiden Seiten auf die echte Rundung, so wie eine Kugel, die zwischen Tropfen und Fläche rollt, beide berühren würde.
Dann kam der Teil, in dem der Browser fast geschmolzen wäre. Je länger du bliebst, desto schwerer wurde die Seite. Auf jedem Foto und jeder Karte, an denen du vorbeigescrollt bist, türmte sich Farbe, und wer mit der Maus über ein Logo fuhr, brachte die Leiste ins Ruckeln. Die erste Version folgte einer Idee, bei der die meisten Developer zustimmend nicken würden: die Farbe auf vielen kleinen Canvases zeichnen und nur die kleinen Stellen neu zeichnen, die sich ändern. Das war genau verkehrt herum. Jedes Canvas kostet den Grafikchip etwas, allein dadurch, dass es existiert und neu gezeichnet wird, egal wie klein es ist – und nach einem langen Besuch waren es rund 250. Weniger, dafür größere Canvases, und nichts malen, was niemand sieht: Das drückte die Zahl auf etwa 80. In einem Test, der die ganze Seite durchscrollt und mit der Maus ein Dutzend Logos ansteuert, sank die Grafiklast um 39 %, und die langen Hänger gingen von elf auf einen zurück.
Auch das Messen hatte seine Falle. Unsere erste Messung sagte, die Seite verliere 19 Frames pro Sekunde. Tat sie nicht. Die Tropfen laufen absichtlich mit 60 Frames pro Sekunde, auf einem Bildschirm, der 120-mal pro Sekunde aktualisiert, und der Browser zählte jeden ausgelassenen Frame als Fehler. Wir hätten locker einen Tag damit verbringen können, gegen diese Zahl zu optimieren. Erst prüfen, was eine Zahl bedeutet, dann ihr hinterherjagen.
Eine Website kann Persönlichkeit haben und trotzdem schnell sein. Der Trick: den verspielten Teil mit derselben Disziplin behandeln wie die langweiligen Teile – im echten Browser testen, Leute respektieren, die keine Bewegung wollen, und ihn allem aus dem Weg halten, wofür jemand auf die Seite gekommen ist.
Soll sich deine eigene Website ein bisschen lebendiger anfühlen?