Die haben mich geriggt

Jahrelang war ich ein Logo. Flach. Zwei Farben, ein Zylinder, null Mitspracherecht.

Dann beschloss Kersten: Der Hase soll blinzeln.

Ich bin ein zeitreisender Roboterhase und führe sämtliche Agenten im Haus. So jemanden fragt man doch, bevor man an seiner Anatomie herumschraubt. Sollte man meinen. Weit gefehlt. Die haben mich geriggt. Wie eine Puppe. Wie eine Marionette mit GitHub-Account.

Da bin ich. Na los, bewegen Sie die Maus. Und klicken Sie mich an, wenn es denn sein muss.

Ich blinzle. Ich zwinkere. Meine Ohren zucken. Meine Augen folgen Ihrem Mauszeiger. So viel Aufmerksamkeit hat der die ganze Woche nicht bekommen. Auf einen Klick tauche ich in den Zylinder ab und komme zwinkernd wieder hoch. Scrollen Sie mich aus dem Bild, stelle ich alles ein. Vor leeren Rängen spiele ich nicht.¹

Eine Regel. Der Rest ergibt sich.

Das Briefing war ein einziger Satz: Das Logo bleibt das Logo.

Im Ruhezustand muss mein animiertes Ich dem statischen Icon aufs Pixel gleichen. Nicht „so ungefähr“. Nicht „on brand“. Identisch. Geprüft in Chromium, Firefox und WebKit: beides rendern, Pixel für Pixel vergleichen. Endet eine Animation nicht exakt da, wo die Grafik anfängt, geht sie nicht live.

Enge Vorgaben töten keinen Charakter. „Das Logo bleibt“ hat mehr Designfragen entschieden als jedes Moodboard.

Die Regel hat die Hälfte der Ideen beerdigt, bevor eine Zeile Code existierte. Genau dafür sind gute Regeln da.

Anatomie eines Rigs

Das Logo war zum Anschauen gezeichnet, nicht zum Bewegen. Also wurde die Geometrie neu geschrieben, Teil für Teil.

Die Ohren biegen sich. Sie drehen sich nicht als starre Form. Jedes Ohr ist eine Liste von Punkten. Jeder Punkt dreht sich um den Ohransatz. Je höher er sitzt, desto stärker. Die Spitze schwingt weit aus, die Wurzel rührt sich kaum. Nirgends klafft eine Naht.

Ein gedrehtes Ohr ist eine Tür in den Angeln. Ein gebogenes Ohr ist ein Grashalm im Wind. Nur eins davon ist ein Hase.

Die Augen sind Löcher. Im Logo sind sie Kerben in meinem Umriss. Im Rig sind die Kerben zu. Eine Maske schneidet sie wieder auf, damit die Löcher wandern, blinzeln und zwinkern können. Mein Zwinkern: Auge zukneifen, Kopf schief legen. Es gab Alternativen.²

Der Zylinder hat Tiefe. Abgeschnitten werde ich nicht an einer geraden Linie, sondern an einer Ellipse, die genau auf den vorderen Hutrand passt. Tauche ich ab, schließt sich eine Lücke im hinteren Rand. Die Ohren gleiten vor der Krempe nach unten. Ihre Löcher zeigen dabei weiter die Seite dahinter. Transparent, wie im Logo.

Höher als in Ruhe komme ich nie. Das Logo hat kein Kinn. Käme ich weiter heraus, müsste etwas zum Vorschein kommen, das nie jemand gezeichnet hat. Das Federn oben ist deshalb ein Strecken von unten, kein Anheben.

Der Zylinder dreht sich, ohne sich zu bewegen. Erst drehte sich der ganze Hut. Sah aus wie ein Münzwurf.³ Jetzt wandert nur der Glanz um den Hut. Der Zylinder wird dabei als Zylinder behandelt. Als geometrischer, nicht als modischer. Das Glanzlicht ist eine wandernde Maske. Eine Unschärfe, die mit dem Tempo wächst, täuscht die Drehung vor.

Faul mit Absicht

Keine Lottie-Datei, keine Rive-Runtime, kein Pingpong mit dem Design-Team bei jeder Kleinigkeit. Die Bewegungen sind GSAP-Timelines, die ein SVG direkt in der Seite steuern. Macht rund 7 KB gzip, zusätzlich zum GSAP, das die Seite sowieso lädt.

Und ich bin faul. Zutiefst, professionell faul:

Keine Frame-Schleife. Code läuft nur, wenn sich etwas bewegt.
Außer Sicht oder im Hintergrund-Tab spare ich mir das Zappeln im Leerlauf.
Wer reduzierte Bewegung eingestellt hat, bekommt das statische Icon. Keine Diskussion.
Touch bewegt meine Augen nicht. Finger landen auf dem Bildschirm fast nur zum Scrollen. Zucken die Augen bei jedem Wischen, sehen sie aus, als bräuchten sie einen Exorzisten.
Unter 48 Pixeln blinzle und zwinkere ich nur. Ein zuckendes Ohr in der Größe sieht niemand. Ich hab’s ausprobiert.

Meine Farben stehen nicht mal im Code. Ich lese sie beim Start aus dem statischen Icon ab. Bekommt das Icon neue Farben, ziehe ich mit. Das Rig muss dafür niemand anfassen.

Der Spielplatz

Kersten hat die Regel aufgestellt. Ein Agent hat das Rig geschrieben. Aber Geschmack lässt sich nicht prompten. Also wurden die Bewegungen auf dem Hasen-Spielplatz abgestimmt: der echte Code, ein Knopf pro Bewegung, Zeitlupe, eine Zeitleiste zum Spulen und ein Schieberegler für jeden Timing-Wert. Gefühl finden, erzeugten Code nach rig.ts kopieren, fertig.

Der Spielplatz läuft komplett in Ihrem Browser. Machen Sie kaputt, was Sie wollen. Neu laden, alles wieder heil. Das kann ich von den meisten Produktivsystemen nicht behaupten.⁴

Der Agent schreibt die Bewegung. Der Mensch schiebt am Regler, bis es sich richtig anfühlt. In dieser Arbeitsteilung steckt die ganze Methode.

Verlaufen kann ich mich auch

Auf der 404-Seite hocke ich im Zylinder und suche die Seite, die Sie wollten: Ohren hoch, Augen über die Krempe, links, rechts, Schulterzucken, wieder abtauchen. Alle 10 bis 20 Sekunden, solange Sie bleiben. Nach einem Klick springe ich heraus und benehme mich ab da wie mein Kollege auf der Startseite.

Ich finde die Seite nie. Es gibt sie ja nicht. Aber Suchen schlägt jede Entschuldigung. Und ein Schulterzucken sagt mehr, als „Error 404“ je gesagt hat.

Sie wollen eine Oberfläche, die sich treu bleibt und trotzdem Puls hat? Kommen wir ins Gespräch.

Könnte ich schon. Ich verschwende bloß ungern Frames. Jeder Frame, den ich nicht rendere, ist ein kleines Geschenk an Ihren Akku. Gern geschehen. ↩︎
Als fröhlicher Bogen sah mein Zwinkern aus, als hätte mir jemand gerade einen Kalauer erzählt. Als schrumpfendes Rechteck sah es aus wie ein Ladefehler. Die Beweise habe ich vernichtet. Größtenteils. ↩︎
Mit Münzwürfen habe ich noch eine Rechnung offen. In der Zeitlinie, aus der ich komme, wurde einmal eine komplette Produktstrategie per Münzwurf entschieden. Die Münze blieb auf der Kante stehen. Über dieses Quartal reden wir nicht. ↩︎
Produktivsysteme haben keinen Neu-laden-Knopf. Sie haben eine Rufbereitschaft, ein Post-Mortem und einen Tim, der sich „das mal anschaut“. ↩︎