Jede Animation unserer Filme, an einem Tag neu gezeichnet

Wir haben diese Prüfung anhand gerenderter Bilder gemacht, nicht anhand des Codes, denn Bewegung, die sich im Code gut liest, kann sich auf dem Bildschirm trotzdem falsch anfühlen. Die Bilder erzählten eine klare Geschichte.

• Ein Farbwischer zu Beginn jeder Szene, als Übergang gedacht, füllte das halbe Bild und zog den Blick vom Inhalt weg.
• Mehr als fünfzig Federn waren jede für sich abgestimmt, sodass sich nichts ganz wie das andere bewegte.
• Inhalte waren klein, kamen alle auf einmal und lagen flach im Bild.
• Manche Auftritte endeten unter diesem Wischer, sodass sie niemand sah.

Insgesamt kamen sechzehn Punkte zusammen, mit einer gemeinsamen Wurzel: Jede Szene hatte ihr eigenes Timing erfunden. Die Bibliothek brauchte nicht sechzehn Korrekturen, sondern ein System.

Das erste Release des Tages änderte bewusst nichts auf dem Bildschirm. Es brachte ein kleines Designsystem für Bewegung: eine Handvoll Easing-Kurven, gemessene statt geratene Federeinstellungen, Standarddauern und Staffelungen, Bausteine für Auftritte, Tiefenebenen und eine Schriftskala. Jede Bewegung, die wir an diesem Tag neu bauten, sollte aus diesen Teilen bestehen, damit sich alle Filme gleich anfühlen.

Außerdem bekam jede der 22 gezeichneten Szenen ihre eigene Datei, damit man sie einzeln lesen und prüfen kann. Um zu beweisen, dass dieser Umzug nichts veränderte, haben wir gerenderte Bilder vorher und nachher Pixel für Pixel verglichen. Und wir haben ein Prüfwerkzeug gebaut, das in Minuten Bildstreifen und kurze Clips jeder Szene und Bewegung rendert, damit jede weitere Entscheidung durch Hinsehen fiel, nicht durch Raten.

Das zweite Release baute auf diesem System neu, was du siehst.

• Szenen treffen jetzt standardmäßig in klaren Schnitten aufeinander. Die fünfzehn Übergänge wurden auf den gemeinsamen Kurven neu gezeichnet und decken nie mehr als einen schmalen Streifen ab, und der Auftritt einer Szene beginnt erst, wenn ihr Übergang vorbei ist.
• Alle 37 Block-Bewegungen sind jetzt vollständig sichtbar und bewegen den Inhalt selbst, ohne Naht über dem Hintergrund.
• Die 42 Text-Bewegungen folgen einem Rezept. Die unruhigsten Effekte zeigen sich jetzt ruhig und bleiben lesbar, und jeder bisherige Name funktioniert weiter, also musste kein Storyboard geändert werden.
• Listen, Zeitleisten, Raster und Preistabellen bauen sich mit ihrem Inhalt auf, mit getakteter Staffelung und einer Hervorhebung, die durch die Einträge wandert, und Preiskarten lesen sich jetzt bequem im 9:16-Format.

Zitate bekamen ein gezeichnetes Anführungszeichen, Chat-Szenen eine Tipp-Anzeige, und Eröffnungs- und Schlusskarte einen echten Call-to-Action-Knopf.

Das dritte Release baute Zahlen und Daten neu: Statistiken, große Zahlen, Zähler, Diagramme, Anzeigen und Tabellen teilen jetzt einen Baukasten. Ein Zähler folgt einer Kurve und kommt in einer von Anfang an reservierten Breite zur Ruhe, sodass das Layout stillsteht, während die Ziffern wachsen, und ganze Zahlen ganz bleiben. Leichtere Effekte lassen diese Szenen etwa 10 Prozent schneller rendern.

Es öffnete auch eine neue Tür, als Option: Braucht eine Szene ein Bild, das keine eingebaute Szene bietet, kann die KI eines in einer kleinen Bewegungssprache schreiben. Jedes Design wird geprüft: Nichts darf aus dem Bild ragen oder sich überlappen, Lesbarkeit, Kontrast und Timing müssen stimmen. Besteht ein Design nicht, nutzt die Szene stattdessen eine bewährte eingebaute Szene, also kann eine ehrgeizige Idee dich nie einen Film kosten. Am Abend starteten diese Designs von einem aus sieben bewährten Layouts, etwa einer großen Zahl, einer Schrittfolge oder einem Vergleich, und füllten dessen Plätze.

So genau hinzusehen machte auch zwei letzte Schliffe offensichtlich. Untertitel liegen jetzt auf einer eigenen Ebene über jedem Übergang, sodass eine Überblendung zwischen zwei Szenen einen scharfen Untertitel zeigt, nie zwei weiche gleichzeitig.

Schriften laden jetzt, bevor das erste Bild gezeichnet wird. Ein Film ohne Markenschrift nutzt wie vorgesehen Inter, und Zitate nutzen die Schrift des Films oder eine sauber geladene Serifenschrift. Text sieht jetzt genau so aus, wie er gedacht war.

Dein nächster Film sollte ruhiger und bewusster wirken: Schnitte statt Wischer, Inhalte, die in durchdachter Reihenfolge kommen, Zahlen, die sauber zur Ruhe kommen, Text, der vom ersten bis zum letzten Bild lesbar bleibt. An deinen Storyboards musst du dafür nichts ändern.

Die neu gebauten Bewegungen findest du unter /animations, einen Film startest du unter /new.