Remotion in OpenAI Codex: Prompt-basierte Motion Graphics

Remotion in OpenAI Codex: Prompt-basierte Motion Graphics

Das Rendern war an einem Dienstagabend um 23:42 Uhr fertig. Ich zog die H.264-Datei aus dem out/-Ordner, legte sie in einen Twitter-Post und starrte einen Moment auf den Bildschirm. Vierunddreißig Sekunden Motion Graphics. Logo-Intro. Animierte Strahlen, die Claude Code mit meinem Agent-Stack verbinden. Drei Szenenübergänge mit kinetischer Typografie. Ein abschließender Logo-Abflug mit einem Suno-generierten Funk-Track darunter bei 75% Lautstärke.

Gesamtzeit von „Ich möchte dieses Video machen" bis „Ich poste dieses Video": 34 Minuten.

Ich habe seit drei Wochen After Effects nicht mehr geöffnet. Nicht weil ich ein besserer Motion Designer bin als vor einem Monat — objektiv bin ich schlechter. Mein Muskelgedächtnis für die AE-Timeline verkümmert. Aber ich habe im April vier Videos veröffentlicht, die in meinem alten Workflow jeweils ein ganzes Wochenende verschlungen hätten. Und ich habe sie alle innerhalb der OpenAI Codex Super-App erstellt, im Gespräch mit GPT-5.4, wobei das Remotion Plugin die schwere Arbeit übernahm.

Dies ist der Beitrag, den ich mir gewünscht hätte, bevor ich einen Nachmittag damit verbrachte, es auf die falsche Art herauszufinden. Nicht die Marketing-Version, in der alles glatt läuft. Die echte Version, mit den Prompts, die funktionierten, den Prompts, die nicht funktionierten, und dem Moment, in dem ich fast aufgegeben und zu After Effects zurückgekehrt wäre.

Der Workflow, der mich dazu brachte, Videos nicht mehr von Hand zu bearbeiten

Hier ist die Kurzversion dessen, was tatsächlich passiert, wenn man Remotion Codex Motion Graphics zusammen verwendet: Remotion ist ein React-Framework zur Erstellung von Videos mit Code. Man schreibt JSX-Komponenten, definiert eine Composition, und Remotion rendert sie zu MP4. Es gibt es schon seit Jahren. Jonny Burger hat es entwickelt. Was sich Anfang 2026 geändert hat, war das Codex Plugin — ein paketiertes Set von Skills, das der OpenAI Codex Agent lädt. Wenn man also „erstelle ein Logo-Intro mit einer Strahl-Animation zwischen zwei PNGs" in den Codex-Chat tippt, weiß GPT-5.4 tatsächlich, was eine <Sequence> ist, was interpolate() macht, und wie man eine Composition verkabelt, ohne dass man jemals den Code anfassen muss.

Das Remotion Codex Plugin wurde im offiziellen remotion-dev/codex-plugin-Repository etwa im selben Zeitfenster veröffentlicht, als OpenAI die Codex-Plugins ankündigte (26. März 2026). Der Codex Agent läuft standardmäßig auf GPT-5.4 — dem ersten OpenAI-Modell mit nativ eingebautem Computer-Use und einem 1M-Token-Kontextfenster, was wichtiger ist, als es klingt, wenn Ihr Videoprojekt anfängt, Komponentendateien anzuhäufen.

Man installiert das Plugin einmal in Codex. Man erstellt einen Projektordner. Man startet einen Chat. Man beschreibt das Video. Codex schreibt den Remotion-Code. Remotion liefert eine Live-Vorschau unter http://localhost:3000. Man sieht das Video in Echtzeit rendern, während man per Prompt iteriert — „lass den Strahl zweimal pulsieren", „verzögere das zweite Logo um 12 Frames", „das Kerning beim Titel stimmt nicht, zieh es enger." Wenn man fertig ist, führt man npx remotion render aus und heraus kommt eine H.264-Datei.

Das ist der gesamte Workflow. Kein Keyframe-Panel. Kein Graph-Editor. Keine verschachtelten Precomps. Kein Rätseln, warum die Textebene plötzlich wieder hinter dem Hintergrund ist.

Der Haken — und ich komme zum ehrlichen Haken noch — ist, dass das nur funktioniert, weil GPT-5.4 wirklich gut darin geworden ist, Remotion-Code zu schreiben. Vor zwei Jahren wäre das ein Desaster aus kaputten Imports und erfundenen APIs gewesen. Heute ist es gut genug, dass ich ihm ein 30-Sekunden-Video anvertraue. Noch nicht gut genug, um ihm einen 5-Minuten-Dokumentarfilm anzuvertrauen. Wir kommen darauf zurück, wo die Grenze liegt.

Warum ich das überhaupt ausprobiert habe (Oder: Die Claude Code Marketing-Geschichte, die niemand überprüft)

Ich möchte ehrlich sein, warum ich angefangen habe, das zu testen, denn der Auslöser war eine Geschichte, die auf X kursiert und die ich nicht vollständig verifizieren kann.

Die Behauptung, die in ungefähr vierzig verschiedenen Threads wiederholt wird, ist, dass Anthropics Claude Code Marketing-Team seine tägliche Videoausgabe mit Remotion plus einem KI-Agenten erstellt hat und innerhalb eines Monats etwa 300 Millionen kumulative Aufrufe angesammelt hat. Ich habe die Screenshots gesehen. Ich habe die Engagement-Zahlen gesehen. Was ich nicht kann, ist auf eine veröffentlichte Anthropic-Fallstudie zu verweisen, die den Workflow genau so bestätigt, wie er beschrieben wird. Ich habe es versucht.

Was ich mit meinen eigenen Augen bestätigen kann: Der Claude Code Marketing-Kanal veröffentlicht Kurzform-Motion-Graphics-Videos in einer Frequenz, die kein traditionelles Video-Team, mit dem ich gearbeitet habe, erreichen könnte. Drei bis fünf pro Tag, manchmal mehr. Die visuelle Sprache ist konsistent — dieselben Easing-Kurven, dieselbe Hintergrund-Gradientenfamilie, dieselbe Logo-Bewegung. Diese Art von Konsistenz kommt von einem von zwei Orten. Entweder erstellt ein erfahrener Motion Designer alles als Templates in After Effects (möglich), oder es gibt eine Code-basierte Pipeline, in der die Templates React-Komponenten sind, die wiederverwendet werden (viel wahrscheinlicher).

Das reichte aus, um mich neugierig zu machen. Wenn Sie meine Experimente zum Claude Code Video-Editing-Workflow verfolgt haben, wissen Sie, dass ich seit fast einem Jahr eine „Video am selben Tag veröffentlichen, an dem ich die Idee habe"-Pipeline verfolge. Ich habe HeyGen plus ElevenLabs im Beitrag zur KI-Video-Produktionspipeline ausprobiert und war nah dran, aber das war Avatar-gesteuert, nicht Motion Graphics. Ich habe Claude Code mit Remotion direkt ausprobiert und das hat funktioniert — Claude Code ist wirklich gut darin — aber ich wollte die Codex-Seite ehrlich testen, weil ich zwei Abonnements habe und lieber eines davon kündigen würde.

Also: ein echter Test, mit einem echten Launch-Video, mit Prompts, die ich wieder verwenden würde.

Das Projekt, das ich als Testfeld benutzt habe

Ich brauchte ein echtes Video, keine Tutorial-Demo. Das Launch-Video, das ich auswählte, war für ein kleines internes Tool, das ich gebaut habe — ein persönliches KI-Assistenten-Projekt namens OpenClaw. Ich brauchte:

• Ungefähr 30 Sekunden, bereit für einen Twitter-Post
• Ein animiertes Logo-Intro
• Zwei Textszenen mit dem Value Proposition
• Eine „Stack-Enthüllung" — kleine Symbolkarten für die Tools, die das Projekt verwendet, mit animierten Verbindungsstrahlen
• Eine abschließende CTA-Szene
• Hintergrundmusik
• H.264-Export, vertikalfreundlich aber mit Priorität auf Querformat

In After Effects wären das vier bis sechs Stunden konzentrierter Arbeit gewesen, mehr wenn ich beim Easing pingelig gewesen wäre. Ich plante 90 Minuten für den Codex-Test ein und dachte, wenn ich das überschreite, schreibe ich einen anderen Beitrag. Den ersten brauchbaren Schnitt hatte ich nach 41 Minuten fertig. Die nächsten 30 Minuten waren Feinschliff, Musik und der zweite Render, nachdem ich einen Tippfehler entdeckt hatte. Zu all dem kommen wir noch.

Aber bevor irgendetwas davon passiert, brauchen Sie einen Projektordner, mit dem das Remotion Plugin tatsächlich arbeiten kann. Dieses Setup ist wichtiger, als es sein sollte.

Einrichtung: Das Codex Plugin und das Remotion-Projekt

Hier ist die Reihenfolge, die ich ausgeführt habe, exakt. Überspringen Sie nichts.

Schritt 1: Installieren Sie das Remotion Plugin in Codex. In der Codex Super-App öffnete ich den Plugin-Marktplatz, suchte nach Remotion und installierte das offizielle remotion-dev/codex-plugin. Sie können das auch über die Codex CLI machen, wenn Sie dort zu Hause sind. Das Plugin registriert eine Reihe von Skills, die der GPT-5.4 Agent nutzt — Composition-Scaffolding, die offizielle Remotion-Docs-MCP, Render-Konfiguration. Nach der Installation starten Sie die Codex-Chat-Oberfläche neu, damit sie die neuen Skills erkennt.

Schritt 2: Erstellen Sie den Projektordner. Ich erstellte einen Ordner unter ~/projects/openclaw-launch-video/ und öffnete einen neuen Codex-Chat, der auf diesen Ordner beschränkt war. Die Projektorganisation von Codex ist hier wichtig — jedes Video bekommt seinen eigenen Ordner, jeder Ordner bekommt seinen eigenen Chat. Zwei Videos in einem Chat zu vermischen führt dazu, dass der Agent Komponenten aus Ihrem letzten Projekt in Ihr aktuelles umbenennt. Fragen Sie mich, woher ich das weiß.

Schritt 3: Bootstrappen Sie das Remotion-Projekt. Mein erster Prompt an Codex:

„Initialisiere ein neues Remotion-Projekt in diesem Ordner mit der neuesten Version. Setze die Composition auf 1920x1080, 30fps, und füge eine einzelne ‚HelloWorld'-Composition hinzu, die einen farbigen Kreis in einer Schleife hoch- und runterskaliert, damit ich bestätigen kann, dass die Live-Vorschau funktioniert. Dann starte den Dev-Server."

Codex führte npm create video@latest aus, wählte das leere TypeScript-Template, erstellte das Gerüst des Ordners und führte npm run dev aus. Innerhalb von etwa 90 Sekunden hatte ich http://localhost:3000 im Browser geöffnet mit einem pulsierenden Kreis. Hello World bestätigt. Live-Vorschau bestätigt. Entwicklungsschleife bestätigt.

Die localhost-Vorschau ist der unbesungene Held dieses gesamten Workflows. Jede Änderung, die Codex am Code vornimmt, wird im Browser hot-reloaded. Sie sehen, wie das Video in Echtzeit aktualisiert wird, während Sie prompten. Diese Schleife macht, dass sich Remotion-in-Codex weniger wie Programmieren und mehr wie Regie führen anfühlt.

Schritt 4: Legen Sie Ihre Assets ab. Ich erstellte einen assets/-Ordner und legte das OpenClaw-Logo als PNG (1024x1024, transparenter Hintergrund), die Icons für die Stack-Tools als SVGs und einen music/-Unterordner mit einem Suno-generierten Funk-Loop ab, den ich früher am Tag exportiert hatte. Dann sagte ich Codex:

„Ich habe Assets hinzugefügt. Das Logo ist unter assets/openclaw-logo.png. Stack-Icons sind SVGs in assets/stack/. Hintergrundmusik ist unter music/slow-funk-lift.mp3. Verwende diese in den kommenden Compositions, importiere niemals andere Versionen."

Diese letzte Zeile — „importiere niemals andere Versionen" — ist eine Gewohnheit, die ich mir angeeignet habe. GPT-5.4 erfindet manchmal Pfade, die nicht existieren, wenn man vage ist. Seien Sie spezifisch bei Ihren Asset-Pfaden und sagen Sie ihm, dass es nicht abschweifen soll.

Wenn Sie noch kein npm install ausgeführt haben, tun Sie es jetzt. Die nächste Phase funktioniert nur, wenn der Dev-Modus aktiv ist.

Die erste echte Composition: Logo-Intro mit animiertem Strahl

Hier beginnt sich der Workflow beim ersten Mal wie Magie anzufühlen, und hier möchte ich verlangsamen, weil die Prompts, die ich verwendet habe, nicht offensichtlich sind, bis man sie einmal benutzt hat.

Mein Prompt für das Logo-Intro:

„Erstelle eine neue Composition namens LogoIntro, die von Frame 0 bis Frame 90 läuft (3 Sekunden bei 30fps). Das OpenClaw-Logo kommt ab Frame 10 von links ins Bild, skaliert von 0.6 auf 1.0 mit einem Spring-Easing. Ab Frame 30 beginnt ein horizontaler Lichtstrahl, der von der Mitte des Logos zum rechten Bildschirmrand zeichnet und bei Frame 60 die volle Breite erreicht. Der Strahl ist eine 4px-Linie mit einem weichen Weiß-zu-Cyan-Farbverlauf und einem dezenten Glühen. Von Frame 60 bis 90 pulsiert der Strahl einmal und verblasst dann. Der Hintergrund ist ein dunkler Navy-Gradient (#0F172A zu #1E293B). Verwende Remotions spring- und interpolate-Helfer. Speichere den Code in src/compositions/LogoIntro.tsx und registriere ihn im Root."

Was Codex tat: Es erstellte LogoIntro.tsx, importierte spring, interpolate, useCurrentFrame und useVideoConfig aus remotion, schrieb ein korrekt gerahmtes AbsoluteFill mit dem Farbverlauf, animierte den Logo-Eintritt mit einer Spring-Konfiguration und baute den Strahl als SVG-Linie mit einer linearGradient-Definition und einem CSS-Box-Shadow für das Glühen. Registrierte es in Root.tsx. Hot-Reloaded die localhost-Vorschau.

Ich schaute mir die Vorschau an. Der Strahl war da, aber er schoss über den rechten Bildschirmrand hinaus, anstatt an der Bildschirmgrenze zu stoppen. Der Logo-Eintritt war knackiger als erwartet.

Zweiter Prompt:

„Der Strahl schießt über den rechten Rand hinaus. Begrenze den Strahl-Endpunkt auf die Bildschirmbreite. Verlangsame außerdem den Spring-Eintritt des Logos um 15% — er fühlt sich zu schnappig an."

Codex passte den damping-Wert in der Spring-Konfiguration an, begrenzte den Strahl-Endpunkt auf width - 80 und lud neu. Besser. Fertig.

Das ist der Rhythmus. Man promptet. Man schaut zu. Man korrigiert in normalem Deutsch. Man denkt nicht über Frame-Nummern oder Keyframe-Interpolationskurven nach — man denkt darüber nach, wie sich das Video anfühlen soll, und der Agent übersetzt das in die Spring-mass- und stiffness-Werte, die man sonst von Hand anpassen würde.

Es gibt einen Moment aus genau dieser Session, über den ich immer wieder nachdenke. Ich war mitten im zweiten Prompt und ertappte mich dabei, „mach den Spring weniger federnd" zu schreiben statt „reduziere den Spring-Dämpfungskoeffizienten." Vor sechs Monaten hätte sich das wie schlampige Kommunikation angefühlt. Jetzt ist es die gesamte Schnittstelle. Der Agent wusste, was ich meinte. Er wählte den richtigen Parameter. Diese kleine Verschiebung — von technischer Anweisung zu kreativer Regie — ist das eigentliche Produkt hier. Das Remotion Plugin und GPT-5.4 sind nur die Verkabelung.

Die Stack-Enthüllungsszene erstellen (Der Teil, der mich fast zum Aufgeben brachte)

Die Stack-Enthüllung war die schwierigste Szene und diejenige, aus der Sie lernen sollten, denn hier zeigen sich die Grenzen des Workflows.

Die Idee: Vier kleine Symbolkarten (Claude-Logo, Codex-Logo, n8n-Logo, Supabase-Logo) erscheinen nacheinander, mit animierten Lichtstrahlen, die sich in einem Graphenmuster zwischen ihnen zeichnen. Karte eins verbindet sich mit Karte zwei durch einen Strahl, Karte zwei teilt Strahlen zu Karte drei und vier auf. Die gesamte Sequenz läuft von Frame 0 bis Frame 120 (4 Sekunden bei 30fps).

Mein erster Prompt war zu vage. Ich sagte:

„Erstelle eine Stack-Enthüllungsszene mit vier Symbolkarten, die mit Strahlen in einem Graphenmuster animiert werden."

Was ich zurückbekam, waren vier Symbolkarten, vertikal gestapelt mit geraden horizontalen Strahlen. Nicht das, was ich wollte. Nicht das, was ich beschrieben hatte, aber auch nicht unvernünftig angesichts meiner Beschreibung.

Also schrieb ich den Prompt mit tatsächlichen Koordinaten um:

„Erstelle eine StackReveal-Composition. Ordne vier Symbolkarten in einem 2x2-Raster zentriert auf dem Bildschirm an. Karte 1 (Claude) an Position (640, 360). Karte 2 (Codex) an (1280, 360). Karte 3 (n8n) an (640, 720). Karte 4 (Supabase) an (1280, 720). Jede Karte ist 200x200, dunkelgrauer Hintergrund mit abgerundeten Ecken, das SVG-Icon zentriert. Karten werden mit einem 6-Frame-Versatz ab Frame 10 eingeblendet. Nachdem alle Karten sichtbar sind (etwa bei Frame 40), zeichne animierte Strahlen: von Karte 1 zu Karte 2 (horizontal), dann von Karte 2 gleichzeitig nach unten zu Karte 3 und Karte 4 aufspaltend. Strahlen verwenden denselben Farbverlauf wie das LogoIntro. Jeder Strahl braucht 15 Frames zum Zeichnen. Ende mit einem kurzen Pulsieren aller Strahlen bei Frame 110."

Das funktionierte beim ersten Hot-Reload. Lektion: Wenn der Agent falsch rät, geben Sie ihm Koordinaten. Hören Sie auf, abstrakt zu sein.

Dann versuchte ich, es weiter zu treiben:

„Füge eine dezente Lissajous-Kurven-Hintergrundanimation hinter den Karten hinzu. Langsam, wenig Kontrast, nur um der Szene etwas Leben zu geben."

Hier lernte ich die Grenze kennen. Codex generierte eine LissajousBackground-Komponente, die mathematisch korrekt war — echte parametrische Gleichungen, useCurrentFrame steuert die Phase — aber visuell sah es aus wie Spaghetti. Zu schnell, zu hoher Kontrast, zu ablenkend von den Karten.

Ich ging vier Mal hin und her, bevor ich etwas Brauchbares hatte:

1. „Mach die Lissajous-Kurve langsamer — reduziere die Frequenz."
2. „Senke die Deckkraft auf 0.15."
3. „Verwende nur eine einzelne Kurve, nicht drei überlappende."
4. „Färbe sie mit demselben Cyan der Strahlen, nicht Weiß."

Nach der vierten Iteration war es endlich dezent genug, um als Hintergrund zu funktionieren. Gesamtzeit für das Lissajous-Experiment: 11 Minuten. In After Effects wäre das 30 Sekunden mit einem Preset gewesen. In Codex waren es vier Prompts und ein Moment des Zweifels.

Das ist der ehrliche Teil dieses Workflows. Manche Dinge sind dramatisch schneller. Manche Dinge sind langsamer. Die mathematisch gesteuerten Hintergründe, die in AE 30 Sekunden dauern, brauchen in Codex ein paar Prompts. Die Charakter-Animationen, die in AE 90 Minuten dauern, brauchen in Codex 15 Minuten. Der Tausch ist real und Sie sollten damit rechnen. Wenn Sie meine Vibe Coding-Experimente verfolgt haben, wird sich das vertraut anfühlen — derselbe Tausch, anderes Medium.

Der Frame-Level-Editing-Trick, der alles veränderte

Das ist die Technik, die Sie aus diesem Beitrag mitnehmen sollten, selbst wenn Sie alles andere vergessen.

Man kann einen Screenshot der localhost-Vorschau bei einem bestimmten Frame machen, ihn in den Codex-Chat ziehen, ihn annotieren (oder einfach im Prompt auf Dinge zeigen), und Codex wird den Screenshot lesen und genau verstehen, welches Element Sie meinen.

Ich machte das für den Titeltext in Szene drei. Der Text „AI-powered video motion graphics" animierte sich gut ein, aber das Kerning zwischen dem „f" und „i" in „video" sah falsch aus. Ich machte einen Screenshot der Vorschau bei Frame 247, zog ihn in den Chat und schrieb:

„Sieh dir diesen Frame an. Das Kerning zwischen dem ‚f' und ‚i' in ‚video' ist zu eng. Lockere es leicht. Außerdem sitzt das Wort ‚graphics' etwa 4px zu tief auf der Grundlinie."

Codex analysierte den Screenshot, identifizierte die Text-Komponente, die diese Szene renderte, fügte eine letterSpacing-Anpassung für das betroffene Glyphenpaar hinzu und korrigierte die Grundlinie des zweiten Wortes. Ein Prompt, zwei chirurgische Korrekturen, beide beim ersten Hot-Reload korrekt.

Frame-Level-Referenzen funktionieren genauso. Statt „der Teil, wo der Strahl pulsiert" zu sagen, sagte ich „Frame 4:17" oder „ungefähr Frame 127" und Codex zielte genau auf diesen Frame in der Timeline. Kombiniert mit Screenshots ist es das Nächste, was ich je benutzt habe, an einem tatsächlichen Gespräch über Video-Edits mit jemandem, der nicht sehen kann, was ich sehe.

Das ist es, was man aufgibt, wenn man zu After Effects zurückkehrt: nicht die Timeline (die Timeline ist in Ordnung), sondern die Fähigkeit, ein Problem in menschlicher Sprache zu beschreiben und das Tool dazu zu bringen zu verstehen, welches Pixel in welchem Frame man meint.

Musik hinzufügen: Suno + 75% Lautstärke + eine Render-Eigenheit

Musik waren die letzten 5 Minuten des Builds.

Ich hatte früher am Tag ein 35-Sekunden-Instrumental auf Suno generiert — einen Track namens „Slow Funk Lift", der das richtige Tempo hatte und nicht mit den Visuals kollidierte. Als MP3 gespeichert. In music/ im Projektordner abgelegt. Dann Codex prompten:

„Füge die Audiodatei unter music/slow-funk-lift.mp3 als Soundtrack für das gesamte Video hinzu. Lautstärke bei 75%. Einblenden über die ersten 30 Frames, Ausblenden über die letzten 30 Frames. Stelle sicher, dass die Audiolänge der gesamten Videolänge entspricht oder sie übersteigt."

Codex fügte eine <Audio>-Komponente in der Root-Composition mit dem Volume-Prop auf 0.75 hinzu, verwendete interpolate, um die Lautstärke über die Fade-Frames hoch- und runterzufahren, und bestätigte, dass die Audiodatei länger als die 35-sekündige Gesamtlaufzeit des Videos war.

Eine Eigenheit, die ich Ihnen ersparen möchte: Als ich das erste Mal renderte, fehlte das Audio vollständig in der Ausgabedatei. Ursache: Die Dev-Server-Vorschau spielt Audio problemlos ab, aber der Render-Befehl benötigt explizit --codec h264, wenn man auch Audio bündelt, sonst lässt die Standard-Codec-Auswahl manchmal stillschweigend die Audiospur fallen. Das Hinzufügen von --codec h264 zum Render-Befehl löste es.

Das ist die Art von Bug, die Sie nichts kostet, sobald Sie davon wissen, und die Sie beim ersten Mal 20 Minuten „warum gibt es keinen Ton" kostet. Jetzt wissen Sie es.

Der finale Render: H.264, Twitter, fertig

Finaler Render-Befehl:

npx remotion render src/index.ts MainComposition out/openclaw-launch.mp4 --codec h264

Renderzeit auf meinem MacBook M-Series: etwa 3 Minuten für 35 Sekunden fertiges Video. Ausgabedatei: 14,8 MB H.264 MP4. Twitter akzeptierte es ohne Re-Encoding. Gepostet. Ins Bett gegangen.

Drei Tage später hatte es Engagement-Zahlen, die ich nicht vorhergesagt hätte. Nicht Anthropic-Marketing-Team-Zahlen — ich bin ein einzelner Typ mit einer Idee, keine Marken-Maschine — aber genug, um die nächsten vier Videos für den Rest der Woche zu planen.

Wofür dieser Workflow wirklich gut ist (und wofür nicht)

Ich möchte ehrlich sein, wo das hier hingehört.

Dieser Workflow ist hervorragend für:

• Social-Media-Drop-Videos (Twitter, LinkedIn, IG Reels mit 30 Sekunden oder weniger)
• Produkt-Launch-Videos, bei denen die visuelle Sprache Logo-zentriert und textlastig ist
• Tägliche oder nahezu tägliche Inhalte, bei denen Geschwindigkeit vor Perfektion geht
• Vorlagenbasierte Motion Graphics, bei denen man die gleiche Art von Video zwanzig Mal mit unterschiedlichem Text erstellt
• Indie-Creator, Solo-Gründer und kleine Teams ohne Motion Designer
• Jeden, der bereits mit Code vertraut ist und die AE-Lernkurve komplett überspringen möchte

Dieser Workflow ist noch nicht gut genug für:

• Handanimierte Charakterarbeit oder alles, was Frame-für-Frame-Illustration erfordert
• Schweres Compositing mit Greenscreen, Rotoskopie oder komplexem Tracking
• VFX-Arbeit für Film, Rundfunk oder alles, was die Farbkorrektur eines Coloristen überstehen muss
• Langform-Dokumentarschnitte, bei denen die menschlichen Schnittentscheidungen der gesamte Punkt sind
• Alles, wo ein erfahrener Motion Designer den Keyframe-Graphen anschauen und eine einzelne Bezier-Kurve anpassen muss

Dieser letzte Punkt ist der, den After-Effects-Loyalisten immer wieder anführen, und sie haben recht. AE gibt Ihnen chirurgische Kontrolle über jeden Keyframe, jede Easing-Kurve, jeden Ebenen-Blending-Modus. Remotion-in-Codex gibt Ihnen Geschwindigkeit und Konsistenz. Sie konkurrieren nicht um denselben Job.

Ein arbeitender Motion Designer wird AE offen haben. Ein Solo-Gründer, der an einem Dienstagabend ein Launch-Video veröffentlicht, wird in Codex sein.

Ehrlicher Vergleich: Codex vs Claude Code für diesen Workflow

Da ich beide Abonnements habe und diesen Workflow nun auf beiden Seiten durchgeführt habe, hier der ehrliche Vergleich.

Claude Code mit Remotion (der Workflow, den ich im früheren Beitrag dokumentiert habe) ist ausgezeichnet. Der Anthropic-Agent beherrscht React fließend, die Remotion-Skills funktionieren sauber, und die Iterationsschleife ist reibungslos. Wenn Sie bereits für alles andere in Claude Code arbeiten, gibt es keinen dringenden Grund zu wechseln.

Codex mit dem Remotion Plugin und GPT-5.4 ist ebenfalls ausgezeichnet. Das Plugin ist gut gebaut. GPT-5.4 versteht Remotion tiefgehend, einschließlich einiger kniffligerer Teile rund um <Sequence>-Composition und Audio-Bündelung. Das 1M-Token-Kontextfenster bedeutet, dass ein großes Projekt mit vielen Compositions über eine lange Chat-Session hinweg kohärent bleibt.

Die Unterschiede, die ich in der tatsächlichen Nutzung bemerkt habe:

• GPT-5.4 war etwas aggressiver bei der Generierung von mathematisch aufwändigen Komponenten (Lissajous, parametrische Kurven, Partikelsysteme) beim ersten Prompt. Manchmal war das großartig. Manchmal generierte es mehr Komplexität als ich verlangt hatte.
• Claude war etwas konservativer bei der Dateistruktur, was standardmäßig sauberere Ordner bedeutete, aber auch, dass ich explizit nach mehr Dateien fragen musste.
• Beide handhabten screenshot-basiertes Feedback gut. Das ist mittlerweile Standard für jeden Agenten, der visuelle Arbeit macht.
• Codex' Plugin-Marktplatz macht die Remotion-Installation zu einer Ein-Klick-Angelegenheit. Claude Codes Skills erfordern etwas mehr Einrichtung.

Wenn Sie eine tägliche Video-Pipeline aufbauen, würde ich den Agenten wählen, der bereits tiefer in Ihrem Workflow verankert ist. Wechseln Sie nicht Ihren gesamten Abonnement-Stack nur dafür. Der Agent ist weniger wichtig als das Remotion Plugin und das React-first-Denkmodell.

Wenn Sie bei beiden komplett neu sind und frisch wählen, gibt Ihnen der Codex Plugin-Marktplatz einen etwas schnelleren Weg von Null zum ersten Render. Das ist der einzige Vorteil, den ich als entscheidend bezeichnen würde.

Häufig gestellte Fragen

Muss ich React können, um das Remotion Codex Plugin zu verwenden?

Nein, aber es hilft. Der Codex Agent schreibt den React-Code für Sie, sodass Sie Videos auf Deutsch beschreiben können und nie eine Komponentendatei anfassen müssen. React zu können macht das Debugging schneller, wenn eine Animation nicht stimmt — Sie können lesen, was der Agent geschrieben hat, und eine gezielte Korrektur verlangen, statt das visuelle Problem von Grund auf zu beschreiben.

Wie lange dauert ein typisches 30-Sekunden-Motion-Graphics-Video mit diesem Workflow?

Für ein vorlagenbasiertes Video mit Logo, Textszenen und einfachen Übergängen: 30 bis 45 Minuten vom leeren Ordner bis zur gerenderten H.264-Datei, einschließlich Musik. Für ein individuelleres Video mit feinabgestimmtem Timing und mehreren Iterationen: 60 bis 90 Minuten. Beides ist dramatisch schneller als dasselbe Video in After Effects ohne bestehende Vorlage.

Ist Remotion für kommerzielle Nutzung kostenlos?

Remotion ist kostenlos für Einzelpersonen und Unternehmen mit drei oder weniger Mitarbeitern. Unternehmen mit vier oder mehr Mitarbeitern benötigen eine kommerzielle Lizenz. Die Preise finden Sie auf der offiziellen Remotion-Website. Das Codex Plugin selbst ist kostenlos; die Kosten bestehen aus Ihrem Codex-Abonnement und der Remotion-Lizenzstufe, in die Sie fallen.

Kann ich andere Formate als H.264 MP4 exportieren?

Ja. Remotion unterstützt H.265, ProRes, VP8, VP9 und Bildsequenzen (PNG, JPEG). Für Twitter, LinkedIn und die meisten Social-Media-Plattformen ist H.264 MP4 der sichere Standard. Für eine höherwertige Archivierung oder Weiterbearbeitung in einem anderen Tool ist ProRes die bessere Wahl.

Was passiert, wenn Codex fehlerhaften Remotion-Code generiert?

Das passiert manchmal — normalerweise bei obskuren API-Funktionen oder wenn man vage Prompts für komplexe Animationen gibt. Die Lösung ist, entweder spezifischere Koordinaten und Frame-Nummern anzugeben, oder die Fehlermeldung zurück in den Chat zu kopieren und Codex zum Debuggen aufzufordern. Die offizielle Remotion-Docs-MCP, die mit dem Plugin geliefert wird, gibt dem Agenten aktuelle API-Referenzen, was in meiner Erfahrung die Rate erfundener Funktionsaufrufe drastisch reduziert hat.

Lassen Sie uns zusammenarbeiten

Sie möchten KI-Systeme aufbauen, Workflows automatisieren oder Ihre technische Infrastruktur skalieren? Ich helfe Ihnen gerne.

• Fiverr (individuelle Builds & Integrationen): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (Enterprise-Lösungen): ramlit.com
• ColorPark (Design & Branding): colorpark.io
• xCyberSecurity (Sicherheitsdienstleistungen): xcybersecurity.io