Animationen mit KI erstellen: Ein Prompt, fertige Motion Graphics

Animationen machen Videos interessanter. Sie visualisieren Abläufe, heben wichtige Punkte hervor und halten die Aufmerksamkeit der Zuschauer. Das Problem: Animationen sind aufwendig. Mit After Effects, Motion oder anderen Tools stecken schnell Stunden in wenigen Sekunden Animation.

Mit Claude Code lässt sich das ändern. Ich zeige dir, wie du mit einem einzigen Prompt dutzende Animationen generieren lässt, die perfekt zum Stil deiner Website passen.

Video-Tutorial: Animationen mit KI erstellen

Den kompletten Prozess habe ich als Tutorial aufgenommen:

Warum HTML für Animationen?

Claude Code ist ein KI-Agent, der direkt mit Code arbeitet. HTML und CSS zu schreiben fällt ihm leicht. Das hat mehrere Vorteile:

Warum HTML für KI-generierte Animationen: Website-Design nutzen, schnelle Iterationen und Video-Export

Website-Design übernehmen: Claude Code hat Zugriff auf dein Projekt. Das heißt, er kann die Farben, Schriften und Stile deiner Website direkt in die Animationen übernehmen. Das Ergebnis sieht aus wie aus einem Guss.

Schnelle Änderungen: Eine Animation gefällt nicht? Ein Prompt reicht, und Claude passt sie an. Das ist deutlich schneller als in After Effects Frame für Frame zu bearbeiten.

Konsistenz: Wenn alle Animationen aus demselben Prompt entstehen, haben sie automatisch einen einheitlichen Stil.

Der Workflow: Vom Transkript zur Animation

Animationen mit KI erstellen: Der Workflow in 4 Schritten

Schritt 1: Basis-Material bereitstellen

Als Grundlage dient ein Video-Transkript. Claude Code liest das Transkript und versteht den Inhalt. Daraus generiert er passende Animationen für verschiedene Stellen im Video.

Alternativ kannst du auch direkt beschreiben, was du brauchst: “Erstelle eine Animation, die zeigt, wie Daten von A nach B fließen” funktioniert genauso.

Schritt 2: Der Prompt

Der Prompt, den ich verwende:

Lies dir das Transkript zu meinem neuesten YouTube Video durch und erstelle passende HTML-Animationen, die ich an verschiedenen Stellen im Video einfügen kann. Die Animationen sollen im Stil unserer Website erstellt werden. Verwende gleiche Farben, Fonts und Stile. Du darfst auch Elemente aus der Website verwenden. Du kannst zum Beispiel Prompt-Eingaben darstellen oder Abläufe oder Aufzählungen, alles, was bei der Verständlichkeit des Videos unterstützt. Erstelle 20 Vorschläge und mindestens 5 davon sollen bereits im Hook sein, also am Anfang des Videos, um die Zuschauer gleich am Anfang zu catchen. Mindestens fünf weitere sollen Rehooks darstellen, das heißt Animationen, die im weiteren Verlauf des Videos deutlich machen, dass noch mehr Inhalte kommen.

Was dieser Prompt leistet:

Kontext: Claude Code kennt das Video-Thema durch das Transkript
Stil-Vorgabe: Die Animationen passen zur Website
Vielfalt: 20 Vorschläge geben Auswahl
Struktur: Hooks am Anfang, Rehooks im Verlauf

Schritt 3: Animationen generieren

Claude Code erstellt jetzt HTML-Dateien. Jede Datei ist eine eigenständige Animation, die du im Browser öffnen und begutachten kannst.

Die Ergebnisse können sein:

Titel-Animationen mit einfliegenden Texten
Ablauf-Darstellungen mit Schritten
Mockups von Terminal-Fenstern oder Chat-Dialogen
Aufzählungen, die Punkt für Punkt erscheinen
Logo-Reveals oder Übergänge

Das Besondere: Claude Code bedient sich direkt bei den Elementen deiner Website. Ein Logo-Reveal verwendet dein tatsächliches Logo. Eine Terminal-Animation sieht aus wie das Terminal auf deiner Seite.

Schritt 4: Export als Video

Die HTML-Animationen müssen noch in ein Video-Format konvertiert werden. Das macht Claude Code über Puppeteer: Er öffnet jede HTML-Datei im Browser, nimmt Frame für Frame auf und erstellt daraus eine MP4-Datei.

Ein Hinweis: Die Animationen laufen oft sehr schnell. Für das finale Video solltest du sie verlangsamen, damit die Zuschauer alles erfassen können.

Welche Animationen eignen sich?

Technische Darstellungen funktionieren besonders gut:

Prompt-Eingaben: Ein simulierter Chat, in dem Text getippt wird
Code-Generierung: Zeilen, die Stück für Stück erscheinen
Ablauf-Diagramme: Schritte, die nacheinander aufleuchten
Datenfluss: Punkte oder Linien, die von A nach B wandern
Vorher/Nachher: Zwei Zustände, die sich ablösen

Weniger geeignet sind realistische Illustrationen oder komplexe Charakteranimationen. HTML/CSS hat Grenzen, und innerhalb dieser Grenzen arbeitet Claude Code.

Tipps für bessere Ergebnisse

Transkript statt Abstract: Je mehr Kontext Claude Code hat, desto passender werden die Animationen. Ein vollständiges Transkript liefert bessere Ergebnisse als eine kurze Zusammenfassung.

Stil-Referenz geben: Wenn dein Projekt bereits CSS-Dateien enthält, nutzt Claude Code diese automatisch. Falls nicht, beschreibe den gewünschten Stil im Prompt.

Dateinamen mit Kontext: Bitte Claude Code, den Dateinamen so zu wählen, dass klar ist, wo die Animation im Video eingefügt werden soll. Das spart Zeit beim Schnitt.

Iterieren: Die ersten Vorschläge sind selten perfekt. Sag Claude Code, was dir gefällt und was nicht. Er lernt aus dem Feedback und passt die nächsten Animationen an.

Selbst ausprobieren

Du willst Animationen mit KI erstellen? Im Video-Tutorial zeige ich jeden Schritt. Und wenn du Unterstützung bei der Umsetzung brauchst, etwa für Workflow-Automatisierung oder Datenaufbereitung, melde dich bei mir.

Weitere Artikel: