Motion Graphics mit KI: Daten, Icons und Automatisierung

Wenn Sie der KI sagen „Mach mir eine Animation“, kommt meistens eine Grafik heraus, die sich bewegt, aber nichts erzählt. Dabei lassen sich mit demselben Werkzeug und den richtigen Eingaben Motion Graphics erzeugen, die Ihre Inhalte tatsächlich tragen. In diesem Artikel beschreibe ich fünf Ebenen: echte Daten, fertige Assets, eigene Grafiken, automatisch aus dem Video abgeleitete Visualisierungen und den Rechercheschritt, der die Zahlen absichert.

Dieser Artikel fasst das Video Claude Design FINALLY Solved Motion Graphics von Jack Roberts zusammen und erweitert es. Der Ablauf in fünf Ebenen stammt aus dem Video; die Timing-Werte, die Formatwahl und der Abschnitt zur Barrierefreiheit sind Ergänzungen dieses Beitrags.

Warum werden Motion Graphics generisch?

Der Grund liegt nicht in der Animations-Engine, sondern in der Eingabe. Die Anfrage „Mach eine schöne Animation“ gibt dem Modell keinerlei Einschränkung, also produziert es die Voreinstellung: abstrakte Formen, austauschbare Übergänge, bedeutungslose Bewegung. Dieselben Voreinstellungen auf der Webdesign-Seite habe ich in Was ist AI Slop beschrieben.

Gute Motion Graphics haben eine gemeinsame Eigenschaft: Die Bewegung erzählt etwas. Eine Zahl wächst, ein Vergleich wird sichtbar, ein Prozess klappt Schritt für Schritt auf. Sobald die Bewegung zum Selbstzweck wird, ist das Ergebnis dekorativ und vergessen, kaum dass es vorbei ist.

Ebene 1: Echte Daten in Animation verwandeln

Hier liegt der schnellste Gewinn. Wenn Sie konkrete Zahlen haben, können Sie sie direkt in eine Animation geben: vergleichende Balkendiagramme, Werte, die sich über die Zeit verändern, Anteilsverteilungen.

In der Praxis sieht die Anfrage etwa so aus: Sie geben an, welche Posten verglichen werden sollen, welchen Wert jeder davon hat, wie mit Farbe umgegangen werden soll und, falls vorhanden, welche Logos dazugehören. Das Modell macht daraus eine interaktive, animierte Grafik.

Der eigentlich wichtige Teil kommt danach: Frieren Sie den Stil ein, der Ihnen gefällt. Wenn Sie sagen „Benutze diesen Stil ab jetzt für alle Balkendiagramme“, fangen Ihre Grafiken an, einander zu ähneln, und Ihre Inhalte bekommen eine wiedererkennbare Bildsprache. Genau das ist der Unterschied zwischen einzelnen schönen Grafiken und einer konsistenten Grafiksprache. Wie sich diese Konsistenz bei jeder Produktion wiederholen lässt, habe ich in der Kritiker-Schleife beschrieben.

Ebene 2: Qualität mit fertigen Assets anheben

Icons zu erzeugen, gehört zu den schwächsten Stellen des Modells. Gleichzeitig gehören Icons zu den Elementen, die die wahrgenommene Qualität am stärksten heben.

Die Lösung: das Icon nicht vom Modell zeichnen lassen, sondern aus einem fertigen Set holen. Icon-Bibliotheken und Archive fertiger Animationen (etwa Lordicon, das im Video gezeigt wird, darunter auch bewegte Icons im Lottie-Format) sind genau dafür da. Die heruntergeladenen Assets fassen Sie zu einer Bibliothek zusammen und geben sie dem Modell als Referenz mit.

Drei Regeln:

• Bleiben Sie bei einem Stil. In einer Präsentation oder einem Video-Set sollten die Icons aus derselben Familie stammen. Stile zu mischen, fällt stärker negativ auf, als schlechte Icons zu benutzen.
• Prüfen Sie die Lizenz. Manche sind unter Namensnennung kostenlos, manche im kommerziellen Einsatz kostenpflichtig. Bei Kundenprojekten ist das keine Verhandlungssache.
• Bauen Sie die Bibliothek einmal auf. In jedem Projekt erneut nach Icons zu suchen, frisst die gesparte Zeit wieder auf.

Ebene 3: Eigene Grafiken erzeugen und einsetzen

Fertige Assets heben das Grundniveau, machen Sie aber nicht eigenständig. Auf der dritten Ebene erzeugen Sie Hintergründe, Illustrationen und Texturen selbst und setzen sie in die Animation ein.

Der Ablauf ist einfach: Sie erzeugen die gewünschte Grafik im Bildgenerierungswerkzeug, wählen aus, was Ihnen gefällt, übertragen sie in die Designumgebung und platzieren sie in der passenden Szene der Animation. Im Beispiel des Videos kostet diese Erzeugung ein paar Credits, rund 12 Cent (die Preise hängen von Werkzeug und Modell ab); dafür verschwindet das Stock-Gefühl. Wie dieser Schritt mit dem Designsystem zusammenwächst, habe ich in den sieben Stufen von Claude Design behandelt.

Ebene 4: Grafiken automatisch aus dem Video ableiten

Hier liegt für Content-Produzenten der eigentliche Gewinn — und das ist zugleich der Teil, den am wenigsten Leute kennen.

Wenn Sie ein Video haben (Ihre eigene Aufnahme oder einen Link), können Sie das Modell bitten, ein Transkript mit Zeitstempeln zu erstellen — eine Ausgabe, in der jedem Wort die Sekunde zugeordnet ist, in der es gesagt wurde. Für sich genommen bedeutet das noch nichts, aber es macht den nächsten Schritt möglich.

Im nächsten Schritt fragen Sie das Modell: Welche Momente in diesem Video lohnt es sich zu visualisieren? Das Modell geht die Rede durch und liefert Vorschläge wie „Hier ziehst du einen Vergleich, da gehört eine Grafik hin“ oder „Hier zählst du drei Schritte auf, da gehört eine sequenzielle Animation hin“. Anschließend erzeugt es die Grafiken für diese Momente und liefert sie mitsamt Zeitstempeln.

Im Arbeitsablauf heißt das: Sie drehen das Video, der Rest läuft weitgehend automatisch. Statt am Schnittplatz zu überlegen „Hier sollte ich noch etwas hinsetzen“, haben Sie die Liste der Vorschläge schon in der Hand. Wenn Sie diesen Ablauf dauerhaft nutzen, verkürzt es die Sache noch einmal deutlich, ihn zu einem Agent Skill zu machen.

Ebene 5: Der Rechercheschritt, den man nicht überspringen darf

Diesen Schritt lassen die meisten aus, und genau er verdirbt das Ergebnis. Wenn Sie im Video von einem Vergleich sprechen, die Zahlen aber nicht ausdrücklich nennen, muss das Modell diese Zahlen irgendwo herbekommen. Findet es keine, erfindet es welche.

Bauen Sie deshalb einen Rechercheschritt in den Ablauf ein: Die Daten, die in der Grafik landen, sollen aus einer echten Quelle stammen, und die Quelle soll benannt sein. Scraping-Werkzeuge, die nicht das rohe HTML einer Seite, sondern nur den relevanten Inhalt ziehen, sind dafür günstig und praktisch zugleich; im Video wird für diesen Schritt Firecrawl eingesetzt.

Daraus folgt die Regel: Keine Zahl kommt in eine Grafik, deren Quelle sich nicht zeigen lässt. Eine schön aussehende falsche Grafik kostet sehr viel mehr als eine hässliche richtige.

Dauer, Rhythmus und Easing

Der häufigste Grund, warum Motion Graphics amateurhaft wirken, ist das Timing. Das Modell fragt diese Werte nicht ab; wenn Sie sie nicht vorgeben, benutzt es die Voreinstellung. Sinnvolle Bereiche für den Anfang:

• Eingangsanimationen: 200–400 ms. Kürzer fällt nicht auf, länger lässt warten.
• Szenenübergänge: 400–600 ms.
• Zählanimationen: 800–1200 ms. Die Zahl muss langsam genug laufen, um lesbar zu sein, und schnell genug, um nicht zu langweilen.
• Easing: für den Eingang eine Kurve, die schnell startet und ausläuft, für den Ausgang umgekehrt. Lineare Bewegung wirkt immer mechanisch.
• Gestaffelter Einsatz: statt fünf Elementen, die gleichzeitig erscheinen, fünf Elemente mit 60–80 ms Versatz dazwischen.

Der letzte Punkt liefert die billigste Qualität überhaupt. Elemente nacheinander statt im Block einzublenden, lässt dasselbe Design völlig anders wirken.

Und eine negative Regel: In einer Szene sollten sich nicht mehr als zwei Dinge gleichzeitig bewegen. Wenn alles in Bewegung ist, findet das Auge keinen Halt, und was die Grafik sagen wollte, geht verloren.

Wählen Sie das Format nach dem Zielort

Dieselbe Grafik lässt sich nicht überall in gleicher Form einsetzen. Legen Sie vor der Produktion fest, wohin sie geht:

• In der Webseite: Eine HTML-basierte Ausgabe ist am besten — sie skaliert, die Dateigröße bleibt klein, der Text bleibt markierbar. Für leichte bewegte Icons eignet sich das Lottie-Format.
• Social Video: als Videodatei exportieren. 9:16 für vertikale Inhalte, 1:1 oder 4:5 für Feed-Beiträge.
• Präsentation: als kurze Schleifen, die auch ohne gesprochenen Kommentar funktionieren.

Auch bei der Dauer ist Vorsicht geboten: Eine einzelne lange Grafikszene verliert in sozialen Medien leicht den Zuschauer. Wenn das, was Sie erzählen wollen, länger ist, teilen Sie es statt in eine lange Szene lieber in mehrere kurze auf.

Bewegungsempfindlichkeit und Barrierefreiheit

Dieses Thema wird bei der Produktion von Motion Graphics oft übersprungen. Für manche Menschen ist Bewegung unangenehm — bis hin zu Schwindel und Übelkeit, eine ganz reale Wirkung.

Auf der Webseite gibt es dafür eine Standardlösung: Animationen für Nutzer einschränken, die im Betriebssystem die Einstellung „Bewegung reduzieren“ aktiviert haben (die CSS-Medienabfrage prefers-reduced-motion). Es reicht, das für Ihre HTML-Ausgabe anzufordern — Sie müssen die Animationen nicht vollständig entfernen; meistens genügt es, die Dauer zu verkürzen und große Positionswechsel wegzulassen.

Zwei weitere Regeln:

• Kein automatisch startender Ton. Wenn Ton nötig ist, soll der Nutzer ihn starten.
• Nicht mehr als dreimal pro Sekunde blinken. Das ist keine ästhetische Vorliebe, sondern eine Schwelle, die die WCAG-Richtlinien zur Barrierefreiheit wegen der Anfallsgefahr festlegen.

Bei Grafiken, die ins Video eingebettet sind, haben Sie diese Kontrollen nicht in der Hand; vermeiden Sie dort schnelles Blinken und kontrastreiches Flackern von vornherein.

Wo sollten Sie aufhören?

Sie müssen nicht für jeden Inhalt die ganze Kette aufbauen. Eine grobe Einteilung:

• Für eine einmalige Grafik reicht Ebene 1.
• Wenn Sie regelmäßig Inhalte produzieren, bauen Sie Ebene 2 einmal auf; die zahlt sich jedes Mal aus.
• Ebene 4 und 5 bauen Sie nur auf, wenn Sie mehr als ein Video pro Woche produzieren. Fehlt das Volumen darunter, kostet die Wartung der Automatisierung mehr Zeit, als sie einspart.

Und noch etwas: Setzen Sie Animation nicht ein, um Zuschauer festzuhalten, sondern um die Erzählung zu stützen. Ein Bildschirm, auf dem sich ununterbrochen etwas bewegt, langweilt genauso schnell wie einer, auf dem sich nie etwas bewegt.

Kurz gefasst

Was bei Motion Graphics den Unterschied macht, ist nicht das Animationstalent, sondern das, was Sie der Animation mitgeben. Echte Daten, eine konsistente Asset-Bibliothek, eigene Grafiken und überprüfte Zahlen — wenn diese vier stimmen, entsteht die Arbeit schnell und sieht am Ende nicht nach KI-Produkt aus.

Häufig gestellte Fragen

Muss ich für Animationen ein eigenes Programm lernen?

Für diesen Ablauf nicht. Weil die Ausgaben HTML-basiert sind, laufen sie im Browser; Sie nehmen sie auf und setzen die Aufnahme ins Video. Professionelle Schnittprogramme brauchen Sie erst, wenn Sie Kontrolle Bild für Bild benötigen.

Darf ich die erzeugten Animationen kommerziell nutzen?

Für die Teile, die Sie selbst erzeugt haben, gibt es kein Problem. Achten müssen Sie auf die fertigen Assets, die Sie einbauen: Icon-Sets, fertige Animationen und Schriften kommen mit ihren eigenen Lizenzen.

Wozu ist ein Transkript mit Zeitstempeln gut?

Für zwei Dinge: die Grafik an die richtige Stelle zu setzen, weil Sie wissen, wann Sie was gesagt haben, und Untertitel zu erzeugen. Dieselbe Ausgabe speist beides.

Was ist der häufigste Fehler bei Datengrafiken?

Ungeprüfte Zahlen zu verwenden. Und an zweiter Stelle: zu viele Daten zeigen. Eine Grafik, eine Idee; bei einem Vergleich reichen zwei oder drei Posten.

Quelle

• Jack Roberts, Claude Design FINALLY Solved Motion Graphics (YouTube, August 2026). Daten in Animation übersetzen, fertige Icon- und Lottie-Assets, Bildgenerierung, Grafikvorschläge aus einem Transkript mit Zeitstempeln und der Rechercheschritt mit Firecrawl beruhen auf diesem Video; die Empfehlungen zu Timing, Format und Barrierefreiheit sind Ergänzungen dieses Artikels.