Bewegte Grafiken mit KI: So entstehen Animationen aus Code

Eine Szene muss nicht aus einem Video-Modell kommen. Ein Programm kann Formen zeichnen, Figuren bewegen und eine Kamera durch eine 3D-Welt führen. Ein KI-Assistent kann den nötigen Code schreiben. Dieser Ansatz steckt hinter zahlreichen Animationen im Browser.

Warum dich das interessieren sollte

Du möchtest einen Text einblenden, ein Schaubild bewegen oder einen kurzen Ablauf erklären? Dafür brauchst du nicht immer ein Video-KI-Abo. Ein KI-Assistent kann stattdessen ein kleines Programm schreiben, das die Grafik im Browser bewegt. Du kannst danach Texte, Farben und Tempo gezielt ändern. Weiter unten findest du einen einfachen Start-Prompt. Die virale Fable-Demo ist der Anlass – du musst den Modellnamen nicht kennen, um den Ansatz zu verstehen.

Ein viraler X-Beitrag von @chetaslua nennt „Fable 5.5“, behauptet „pure code“ und „one shot“ (Erstellung in einem einzigen Durchgang). Das sind Aussagen des Autors. Modellidentität, Entstehungsprozess und vollständiger Verzicht auf Bild- oder Videoerzeugung sind nicht unabhängig bestätigt. Wir behandeln den Beitrag deshalb nicht als gesicherten Produktstart oder reproduzierten Leistungstest.

Was „Animation aus Code“ bedeutet

HTML (Grundgerüst einer Webseite), CSS (Gestaltungsregeln) und JavaScript (Programmiersprache im Browser) können gemeinsam bewegte Grafiken erzeugen. Canvas (digitale Zeichenfläche) eignet sich etwa für Formen und einfache Figuren. Three.js (Bibliothek für dreidimensionale Browser-Grafik) ermöglicht räumliche Szenen.

Anders als bei einem fertig erzeugten Videoclip kannst du im Code gezielt Text, Farben, Geschwindigkeit oder Bewegungsbahnen ändern. Für klar gestaltete Erklärgrafiken ist das interessant. Es ersetzt nicht automatisch jede Filmszene.

So probierst du den Ansatz aus

Starte mit einer einfachen Szene statt einem kompletten Zeichentrickfilm. Bitte einen KI-Programmierhelfer um eine einzelne HTML-Datei ohne externe Dateien, eingebettete Videos, Bilder oder Netzaufrufe. Lass den Code erklären und prüfe ihn, bevor du ihn ausführst. Öffne unbekannten Code nicht in einer Arbeitsumgebung mit vertraulichen Daten.

Beispiel-Prompt

Schreibe eine einzelne HTML-Datei für eine zehn Sekunden lange Animation: drei blaue Kreise werden zu einem Netzwerk, danach erscheint der Text „Aus Ideen wird Zusammenarbeit“. Verwende nur selbst gezeichnete Formen und JavaScript. Keine Bilder, keine Videos, keine externen Bibliotheken, keine Netzaufrufe. Baue Start, Pause und Neustart ein. Erkläre den Code und alle enthaltenen Funktionen.

Die erste Fassung ist ein Prototyp (früher Teststand). Prüfe Lesbarkeit, Timing und Verhalten auf dem Smartphone. Lass danach nur einen Punkt auf einmal ändern. Soll ein normaler Videoclip entstehen, braucht es zusätzlich eine Aufnahme oder einen Export des Ablaufs.

Woran du echte Code-Animation erkennst

Eine HTML-Datei allein beweist nichts: Sie kann auch ein fertiges Video enthalten. Frage nach dem vollständigen Quellcode und prüfe, ob die Szene tatsächlich gezeichnet wird oder nur ein MP4 abspielt. Auch eine Bildschirmaufnahme beweist nicht, wie viele Versuche nötig waren.

Unser Fazit: Der praktische Ansatz ist spannend. Die konkreten Fable-Leistungsversprechen bleiben offen. Du brauchst keinen unbestätigten Modellnamen, um mit einer kleinen, nachvollziehbaren Animation anzufangen. Unser Beispiel-Prompt wurde nicht als eigener Leistungstest ausgeführt.