Zum Hauptinhalt springen

KI-Erklärvideos: Die code-getriebene Pipeline

Fortgeschritten

Ein Beitrag mit dem Titel "Opus 5.5 is good at explainer videos" stand nahe der Spitze von Hacker News mit 319 Punkten und 175 Kommentaren — und liest man den Thread, ist das Interessanteste, wie viele Leute den Mechanismus falsch verstanden haben. Sie nahmen ein Videomodell an. Es ist keines.

Was passiert, ist seltsamer und weit nützlicher: Ein Coding-Modell schreibt ein deterministisches Animationsprogramm, und ein separater Renderer verwandelt dieses Programm in Frames. Das Modell sieht kein einziges Pixel der Ausgabe. Das heißt, das Ganze verhält sich wie Software — diff-bar, neu renderbar, parametrisierbar und debugbar — statt wie ein Spielautomat, den du neu promptest, bis es richtig aussieht.

Diese Seite ist der praktische Leitfaden, der diesem Thread fehlte: wie die Pipeline funktioniert, welche der drei Render-Engines du wählen solltest (und bei welcher die Modelle messbar schlecht sind), die zwei Fehlermodi, die von Agenten geschriebenen Animationscode still zerlegen, die Pacing-Arithmetik, die einen anschaubaren Erklärfilm von einem unlesbaren trennt, und wohin das Geld tatsächlich fließt.

What you'll learn
  • Erklären, warum ein Coding-Modell ein Videomodell bei Erklärvideos schlägt — und was es dafür aufgibt
  • Den Grund nennen, warum Math.random() in einer frameweise gerenderten Animation verboten ist, und was es ersetzt
  • Zwischen Remotion, Motion Canvas und Manim anhand der Lizenz und der Frage entscheiden, wie gut Modelle sie schreiben
  • Die zwei Fallen in von Agenten geschriebenem Animationscode erkennen: den Manim-Fork-Split und die veraltete Remotion-API
  • Eine minimale Verweildauer pro Slide berechnen statt sie zu raten, damit Zuschauer wirklich lesen können
  • Vorhersagen, welcher Posten die Rechnung dominiert (meist ist es nicht das LLM)

Der Mechanismus: das Modell schreibt ein Programm, kein Video​

Zwei völlig verschiedene Dinge werden "KI-Video" genannt.

Diffusions-Videomodelle (die Familie, die in Generative Medien behandelt wird) nehmen einen Prompt und geben direkt Pixel aus. Exzellent für B-Roll, eine Drohnenaufnahme, eine Textur, eine Stimmung. Schlecht bei allem, was exakt richtig sein muss: lesbarer Text, ein korrektes Architekturdiagramm, dein echtes Produkt-UI, eine Zahl, die 40 % lauten muss.

Code-getriebene Animation geht den anderen Weg. Ein Coding-Modell schreibt Quellcode für eine Animation — React-Komponenten, einen TypeScript-Szenengraph oder Python — und ein Renderer führt ihn aus. Text ist Text, also ist er scharf und korrekt geschrieben. Ein Diagramm ist ein Layout, also ist es korrekt. Dein Logo ist deine Logo-Datei.

Diese Trennung erklärt den häufigsten Workflow-Bericht aus dem HN-Thread: Das Modell "erstellt eine HTML-Seite und nutzt rohe, per JS getimte Animationen", dann werden die Frames aufgenommen und mit ffmpeg zusammengesetzt. Sie erklärt auch, was der Ansatz aufgibt — er kann keine fotografischen Bilder erfinden, weshalb die meisten echten Pipelines ein Bildmodell oder ein Videomodell für B-Roll aufrufen und es hineinkomponieren.

Die Konsequenz, die es sich zu verinnerlichen lohnt: Dein Erklärvideo wird zu einem Repository. Ändere den Preis auf Slide 4, neu rendern, fertig. Lokalisiere das Voiceover, rendere zwölf Sprachen aus denselben Szenen. Das ist keine Eigenschaft, die dir irgendein Prompt-zu-Video-Modell gibt.

Warum Determinismus der ganze Trick ist​

Hier ist das Detail, das leise entscheidet, ob deine Pipeline sauberes Video oder ein flackerndes Chaos produziert — und fast niemand, der darüber schreibt, erwähnt es.

Ein Renderer wie Remotion macht keine Screen-Aufnahme deiner Animation. Er öffnet die Composition in einem Headless-Chrome, setzt die Uhr auf Frame 0, macht einen Screenshot, setzt die Uhr auf Frame 1, macht einen Screenshot und so weiter — und er tut das über mehrere Threads hinweg und öffnet die Seite mehrfach. Frames entstehen außerhalb der Reihenfolge, parallel, in separaten Browser-Kontexten.

Alles folgt daraus:

  • Animation muss eine reine Funktion der Frame-Nummer sein. In Remotion ist das wörtlich die API: useCurrentFrame() gibt dir den Frame, interpolate() bildet ihn auf einen Wert ab. Keine Timer, kein requestAnimationFrame, keine CSS-Transitions, die von der Wanduhrzeit getrieben werden. Eine CSS-Transition rendert genau das, was zufällig mitten im Ablauf war, als der Screenshot ausgelöst wurde.
  • Math.random() ist von Konstruktion aus kaputt. Es liefert in jedem Thread und bei jedem Seitenaufruf einen anderen Wert, sodass ein "zufälliges" Partikel in jedem Frame an eine neue Position springt. Remotion liefert random(seed) — einen geseedeten mulberry32-PRNG — genau dafür: random(1) gibt immer 0.07301638228818774 zurück. Dasselbe gilt für spring(), das eine gecachte, reine Berechnung mit dem Schlüssel (frame, fps, config) ist.
  • Ausgelassene Frames werden unmöglich. Eine Screen-Aufnahme einer schweren Animation verliert Frames, wenn die CPU nicht mitkommt. Frameweises Rendern dauert einfach länger. Deshalb kann ein 5-minütiger Render auf einem Laptop ein Video erzeugen, das vollkommen flüssig läuft.
Watch out
  • Wenn du dir nur eine Regel für das Prompten eines Agenten merkst, der Animationscode schreibt: verbiete Wanduhrzeit. Kein setTimeout, keine CSS-Transition, kein Date.now(), kein Math.random(). Jeder visuelle Wert muss aus der aktuellen Frame-Nummer abgeleitet werden. Modelle greifen zu CSS-Transitions, weil das Web-Korpus voll davon ist.

Die drei Engines​

Alle drei sind real, werden aktiv gepflegt und produzieren Ausgabe in Broadcast-Qualität. Sie unterscheiden sich in der Sprache, in der Lizenz und — wichtig — darin, wie zuverlässig ein Modell sie schreibt.

RemotionMotion CanvasManim
SpracheReact / TypeScriptTypeScript (Generatoren)Python
Reporemotion-dev/remotionmotion-canvas/motion-canvas (~19,2k Stars)ManimCommunity/manim (~41k) · 3b1b/manim (~94k)
LizenzSource-available + Company LicenceMITMIT
Optimaler EinsatzProdukt-/Launch-Video, UI, textlastiges ErklärvideoTimeline-präzise Motion GraphicsMathematische und algorithmische Visualisierung
Qualität von Modell-CodeStark — und es liefert offizielle Agent Skills mitPassabelDie schwächste der drei (siehe unten)

Zwei Dinge in dieser Tabelle verdienen mehr als eine Zeile.

Die Lizenz von Remotion ist der Haken, nicht der Code​

Remotion ist nicht MIT. Es ist source-available mit einer zweistufigen kommerziellen Lizenz, und die Schwelle ist klein genug, um die meisten Teams zu erfassen: kostenlos für Einzelpersonen, Non-Profits, Evaluierung und gewinnorientierte Unternehmen mit bis zu 3 Mitarbeitenden; eine kostenpflichtige Company Licence für gewinnorientierte Organisationen mit mehr als drei.

Die zweite Aufteilung ist wichtiger, wenn du ein Produkt baust statt ein Video:

  • Remotion for Creators — sitzplatzbasiert, gedacht für Rendering in geringem Volumen innerhalb und für dein eigenes Unternehmen, ausdrücklich nicht für das Ausliefern personalisierter Videos an deine Endnutzer.
  • Remotion for Automators — render-basiert, also die Stufe, in der du in dem Moment landest, in dem ein Agent Videos für Kunden rendert. Ab Version 5.0 bringt sie verpflichtendes Telemetrie-Reporting mit einem Lizenzschlüssel mit.

"Mein Agent generiert ein Video pro Anmeldung" ist also kein Creators-Use-Case. Kalkuliere es als Automators, bevor du es ausrollst. Wenn das ein Ausschlusskriterium ist: Motion Canvas ist MIT und deckt viel vom selben Terrain ab.

Die Manim-Falle: zwei Forks, ein Importname​

Diese erwischt Leute, die noch nie davon gehört haben, und sie erklärt auch eine Beobachtung aus dem HN-Thread — dass starke Coding-Modelle schlechteres Manim schreiben, als man erwarten würde, mit Community-Berichten, dass Gemini es derzeit besser hinbekommt als Opus 5.5.

Es gibt zwei Manims:

  • 3b1b/manim — Grant Sandersons Original, das aus den berühmten Videos, ~94k Stars, installiert als manimgl.
  • ManimCommunity/manim — der Community-Fork, ~41k Stars, der, der tatsächlich dokumentiert und für den allgemeinen Gebrauch gepflegt wird, installiert als manim.

Sie sind API-inkompatibel, und beide werden als from manim import * importiert. Jedes Tutorial, jede StackOverflow-Antwort und jeder Blogpost im Trainingskorpus gehört zu einem von beiden, ohne Kennzeichnung. Also schreibt das Modell plausiblen Code, der beide Dialekte mischt, und Python wirft einen Fehler bei einer Methode, die im anderen Fork existiert. Das ist kein Denkfehler; es ist ein Fehler durch einen vergifteten Namensraum.

Die Lösung ist langweilig und sie funktioniert: Pinne den Fork in deinem Prompt und in deiner Umgebung, und gib dem Agenten die echte API-Oberfläche der Version, statt ihn eine erinnern zu lassen.

Pinne den Manim-Dialekt, bevor der Agent eine Zeile schreibt

Use ManimCommunity Manim (the "manim" package on PyPI), NOT 3b1b/manimgl.
Before writing any scene, run:
python -c "import manim; print(manim.__version__)"
and confirm the version. If a class or method you want is not in that
version's API, do not use it — check with:
python -c "import manim; print([n for n in dir(manim) if 'Text' in n])"
Never mix manimgl APIs (e.g. ShowCreation) with community APIs (Create).

Die Falle der veralteten API (Remotion-Edition)​

Dasselbe Problem des vergifteten Korpus trifft Remotion aus einem anderen Grund: Die Library hat sich schneller bewegt als die Trainingsdaten.

Im aktuellen Remotion leben Medienkomponenten in @remotion/media, und die Trimming-Props heißen trimBefore / trimAfter. Preview und Render können sogar absichtlich verschiedene Komponenten nutzen — Html5Audio aus remotion in der Vorschau, Audio aus @remotion/media beim Rendern, umgeschaltet über useRemotionEnvironment(). Ein Modell, das überwiegend auf älterem Material trainiert wurde, schreibt import {Audio} from 'remotion' mit startFrom, was die alte Form ist.

Dieser Code läuft möglicherweise trotzdem. Er tut möglicherweise auch still nichts Nützliches, was schlimmer ist.

Genau deshalb veröffentlicht Remotion offizielle Agent Skills — ein Set von zwölf Skills, die einem Agenten die aktuellen Best Practices in die Hand geben, statt zu hoffen, dass er sich an sie erinnert. Sie sind für Claude Code, Codex, Cursor und Verwandte gedacht und folgen demselben offenen Format, das in SKILL.md als offener Standard behandelt wird.

Remotions offizielle Agent Skills installieren

npx skills add remotion-dev/skills

Die Skills sind granular, und das ist der Punkt — du rufst den auf, der zur Arbeitsphase passt: /remotion-create zum Scaffolding, /remotion-markup für Animation und Typografie, /remotion-studio für die Vorschau, /remotion-render zum Rendern, /remotion-captions für Untertitel, plus remotion-best-practices als Dach, wenn du unsicher bist. Herstellergepflegte Skills sind die günstigste verfügbare Behebung für veraltetes Modellwissen über eine schnell bewegliche Library: eine Installation, und der Agent hört auf zu raten.

Die Pipeline, die tatsächlich funktioniert​

Der größte einzelne Qualitätshebel ist nicht ein besserer Prompt für das gesamte Video. Es ist die Aufteilung der Arbeit, sodass das Modell die Urteilsarbeit macht und der Renderer die Determinismus-Arbeit — mit einem menschenlesbaren Artefakt dazwischen.

Guided walkthrough1 of 7
  1. Bitte zuerst um eine JSON-Szenenliste: pro Szene ein Titel, der Bildschirmtext, die visuelle Absicht und eine Dauer in Sekunden. Das ist der günstige, prüfbare Schritt. Du kannst zwölf Szenen in dreißig Sekunden lesen und die Erzählung korrigieren, bevor eine einzige Komponente existiert — und die Story zu korrigieren ist die Änderung, die das Video am meisten verbessert. Code, der aus einem geprüften Storyboard erzeugt wird, ist außerdem weit konsistenter als Code aus einem Absatz voller Vibes.

Über die CLI rendern, dann deine echte Concurrency finden

# deterministic render, reproducible in CI
npx remotion render src/index.ts MyExplainer out/video.mp4

# stop guessing --concurrency: measure it
npx remotion benchmark src/index.ts MyExplainer --concurrencies=2,4,8 --runs=3

Pacing: der Grund, warum die meisten KI-Erklärvideos unanschaubar sind​

Die konsistenteste Beschwerde im HN-Thread war nicht, dass die Videos schlecht aussahen. Es war, dass sie sich zu schnell zum Lesen bewegten. Slides erscheinen, Text animiert herein, und er ist weg, bevor ein Mensch den Satz beendet hat.

Das ist ein Bug mit einer Formel, keine Geschmacksfrage. Die Lesegeschwindigkeit Erwachsener für unbekannten Bildschirmtext liegt bei etwa 200–250 Wörtern pro Minute, und ein Zuschauer braucht auch Zeit, den neuen Text zu finden, bevor er zu lesen beginnt. Also:

# minimum dwell time for a text block, in frames
words        = number of words in the block
wpm          = 200          # conservative for unfamiliar on-screen text
settle       = 0.4          # seconds to notice and locate the new text
exit         = 0.3          # seconds of breathing room before it leaves

dwell_seconds = settle + (words / wpm) * 60 + exit
dwell_frames  = ceil(dwell_seconds * fps)

# worked example: a 14-word bullet at 30 fps
# 0.4 + (14 / 200) * 60 + 0.3 = 4.9 s  ->  147 frames

Zwei Anmerkungen, die das wirklich nützlich machen:

  • Schnell einanimieren, lange halten. Der Eingangs-Übergang sollte 200–400 ms dauern; das Halten ist, wohin das Verweildauer-Budget geht. Modelle neigen zum Gegenteil — ein langes, elegantes Fade, dann ein kurzes Halten.
  • Wenn es eine Erzählung gibt, ist die Untergrenze die Länge der Erzählung. Text muss mindestens so lange stehen wie der Satz, der ihn beschreibt. Deshalb behebt das Ableiten der Szenendauer aus dem synthetisierten Audio (Schritt 4 oben) das Pacing fast kostenlos.

Begrenze jede Szene auf max(dwell_frames, narration_frames) und ein großer Teil des "KI-Slop-Video"-Gefühls verschwindet, ohne jede Änderung an den Visuals.

Was es kostet, und welcher Posten dominiert​

Community-Berichte aus dem HN-Thread veranschlagen ein vollständig generiertes Erklärvideo bei etwa 3–4 US-Dollar API-Ausgaben, mit dem bemerkenswerten Detail, dass die Kosten von Bildmodell-Aufrufen dominiert wurden, nicht vom Sprachmodell. Ein Kommentator berichtete, ein 5-minütiges Video auf einem M4 MacBook Air in etwa 5 Minuten Wanduhrzeit mit einer orchestrierten Pipeline generiert zu haben.

Behandle die absoluten Zahlen als verderblich, aber die Form ist strukturell und es lohnt sich, um sie herum zu planen:

  • Das LLM ist hier günstig. Ein Storyboard plus ein paar hundert Zeilen Animationscode sind eine kleine Zahl von Tokens. Selbst zu Flaggschiff-Preisen sind das Cents. Siehe Was KI bei den verschiedenen Anbietern kostet.
  • Generative Aufrufe pro Asset dominieren. Jedes generierte Bild oder B-Roll-Clip ist ein separater bezahlter Aufruf, und sie multiplizieren sich mit der Szenenzahl. Das ist der Posten, den man begrenzen muss.
  • Compute ist deins. Das Rendering läuft auf deiner Maschine oder in deiner CI, also ist es Zeit und Strom statt API-Ausgaben — bis du es zu einem Serverless-Renderer verlegst, ab wann es beides wird.
  • Neue Renders sind nahezu kostenlos, was der ganze strukturelle Vorteil ist. Einen Tippfehler auf Slide 4 zu korrigieren kostet einen Render, nicht eine Neugenerierung. Die Lokalisierung in zwölf Sprachen kostet zwölf TTS-Läufe und zwölf Renders, nicht zwölf Videos.

Der praktische Budgetierungs-Schritt: Generiere Bilder einmal, committe sie als Assets und halte neue Renders asset-frei. Eine Pipeline, die bei jedem Render Bilder neu generiert, ist die, die eine überraschende Rechnung produziert.

Das Gleichheitsproblem​

Die schärfste Kritik im Thread ist die, die man ernst nehmen sollte: Innerhalb von Wochen nach Verbreitung dieser Tools wurden die Ergebnisse wiedererkennbar. Gleiche Gradient-Hintergründe, gleiche einfedernden Cards, gleiche Drei-Wort-Bullets, gleiche flotte Stimme. Mehrere Kommentatoren markierten auch repetitive Texte und, in einem Fall, ein Video, das selbstbewusst über das völlig falsche Thema war — eine Referenzseite zu Twilight Imperium, beschrieben als KI-Daten-Startup.

Wenn du das ernsthaft nutzt, sind das die Hebel, die die Ausgabe messbar ent-generisieren:

  • Liefere das Designsystem, lass es nicht erfinden. Übergib deine echte Palette, Typo-Skala, Abstandsskala und dein Logo als Konstanten, die die Komponenten importieren. Unterspezifizierte Prompts sind genau die Stelle, an der der Hausstil eines Modells durchsickert.
  • Schreibe die Texte selbst, oder redigiere sie hart. Die Visuals sind der Teil, in dem Modelle gut sind. Die Erzählung ist der Teil, der sich generiert liest.
  • Nutze deine eigenen Screen-Aufnahmen als Hero-Asset. Echtes Produkt-Footage, in eine generierte Szene komponiert, ist der stärkste einzelne Zug gegen Gleichheit, und er behebt auch das Halluzinationsrisiko — das Video kann dein Produkt nicht falsch beschreiben, wenn das Produkt auf dem Bildschirm ist.
  • Prüfe die Aussagen wie Dokumentation. Alles Faktische in einem Erklärvideo ist eine Tatsachenbehauptung, die in deinem Namen veröffentlicht wird, ohne den einfachen Korrekturweg einer Textseite. Prüfe es, bevor du renderst, nicht nachdem es auf YouTube ist.
  • Brich absichtlich eine Konvention. Eine bewusste Entscheidung, die das Default-Template nicht treffen würde — ein ungewöhnliches Seitenverhältnis, Stille dort, wo Musik erwartet wird, ein handgezeichnetes Asset — genügt meistens, damit die Ausgabe nicht mehr als Maschinen-Default gelesen wird.
Code-getriebenes Video: das Vokabular
Drücke Enter oder die Leertaste, um die Karte umzudrehen. Nutze die Pfeiltasten links und rechts, um zwischen den Karten zu wechseln.Begriff angezeigt.
1 / 8

Worin das gut ist, und worin nicht​

Es lohnt sich, ehrlich zu sein, denn die Skeptiker in diesem Thread hatten einen Punkt: Viel von dem, was produziert wird, ist ein animiertes Foliendeck mit einem Voiceover. Das ist ein völlig gutes Artefakt für ein Changelog, einen Launch, eine Release-Notiz oder eine Onboarding-Tour — und ein schlechter Ersatz für echtes Lehren, das ein durchgerechnetes Beispiel, eine falsche Abzweigung und einen Grund zum Interesse braucht.

Greife zur code-getriebenen Pipeline, wenn:

  • Der Inhalt exakt richtig sein muss — echtes UI, echte Zahlen, echte Diagramme.
  • Du es später ändern musst oder in mehreren Sprachen ausliefern willst.
  • Dasselbe Template viele Videos aus verschiedenen Daten produzieren wird.

Greife zu etwas anderem, wenn das Ziel fotografisches Footage ist (nutze ein Videomodell), oder wenn der Wert darin liegt, dass ein Mensch eine schwere Idee erst schlecht und dann gut erklärt — was immer noch das ist, was keine Pipeline produziert.

Check yourself

0/5
  1. Ein Modell schreibt eine Erklär-Animation mit CSS-Transitions und setTimeout. Die Vorschau sieht perfekt aus. Was passiert beim Rendern?
  2. Der Manim-Code deines Agenten scheitert immer wieder an Methoden, die 'existieren müssten'. Die wahrscheinlichste Ursache?
  3. Ein Startup mit 3 Personen baut ein Produkt, das für jede neue Anmeldung ein personalisiertes Remotion-Video rendert. Lizenzsituation?
  4. Prüfer sagen, dein generiertes Erklärvideo sei 'zu schnell'. Die günstigste strukturelle Behebung?
  5. Du erwartest, dass das LLM die Kosten eines generierten Erklärvideos dominiert. Was zeigen Berichte tatsächlich?

Quellen & weiterführende Literatur​

Weiter​