Videos mit KI erstellen: Remotion + Claude Code

Das Wichtigste in Kürze

→Remotion ist ein React-Framework, das Videos aus Code erstellt - statt Timeline bearbeitest du Komponenten
→Claude Code übernimmt das Programmieren - du beschreibst nur, was du sehen willst
→Zwei Beispiele: Einfaches Intro (1 Prompt) und komplexe Animation (iterativer Prozess)
→Kein Vorwissen nötig - weder React noch Videobearbeitung

In diesem Artikel zeige ich dir, wie du mit Remotion und Claude Code Videos erstellen kannst - auch ohne Programmierkenntnisse. Zuerst erkläre ich kurz, was Remotion ist. Dann gehen wir durch den Workflow und schauen uns zwei konkrete Beispiele an.

Was ist Remotion?

Remotion Startseite - Make videos programmatically

Remotion ist ein Open-Source-Framework, das Videos aus React-Code generiert. Statt einer Timeline mit Clips arbeitest du mit Komponenten und Animationen - wie beim Bauen einer Website.

Der Clou: Du hast volle Kontrolle über jeden Frame. Alles was im Web funktioniert (CSS, SVG, Canvas, WebGL) kannst du in Videos verwenden. Video-Automatisierung wird damit plötzlich machbar - auch ohne Entwickler-Team.

Was Remotion kann

✓Videos aus Code: React-Komponenten werden zu Videoframes
✓Dynamische Inhalte: Daten aus APIs, Datenbanken oder JSON einfügen
✓Skalierung: 1.000 personalisierte Videos aus einer Vorlage erstellen
✓Live-Vorschau: Remotion Studio zeigt Änderungen sofort an
✓Cloud-Rendering: Serverlose Verarbeitung mit Remotion Lambda

Der Workflow: Prompt zu Video

Der eigentliche Trick ist die Kombination mit Claude Code. Du beschreibst in normalen Worten, was du sehen willst, und Claude schreibt den kompletten React-Code.

Das funktioniert, weil Claude Code React und TypeScript beherrscht, die Remotion-Dokumentation kennt, und Projekte selbstständig aufsetzt - npm install, Ordnerstruktur, Config.

Schritt 1: Projekt erstellen

Ich habe Claude Code einfach gesagt: "Erstelle ein Remotion-Projekt für ein Intro-Video." Claude Code hat dann einen neuen Ordner angelegt, alle Dependencies installiert und die Projektstruktur erstellt.

Schritt 2: Video beschreiben

Dann beschreibst du in normalen Worten, was du sehen willst. Claude Code interpretiert das und schreibt den Code.

Schritt 3: Verfeinern und exportieren

Du schaust dir das Ergebnis an, gibst Feedback ("mach das größer", "andere Farbe"), und am Ende: npm run render - fertig ist die MP4-Datei.

Beispiel 1: Das Kivocado-Intro

Mein erstes Video: Ein 16-Sekunden-Intro für Kivocado. Komplett mit einem einzigen Prompt erstellt:

Mein Prompt:

"Die Kivocado-Avocado schwebt durch eine KI-Welt. KI-Tool-Icons (ChatGPT, Claude, Gemini, Perplexity, Midjourney) fliegen nacheinander zur Kivocado hin. Bei jedem Tool leuchtet die Kivocado stärker auf - sie wird 'smarter'. Am Ende erscheint der Schriftzug."

Das war's. Zwei Sätze - und Claude Code hat daraus ein vollständiges Intro mit Animationen, Partikeln, Glow-Effekten und Text-Einblendungen gebaut.

Beispiel 2: Die Hero Section Explosion

Das zweite Beispiel zeigt, wie der iterative Prozess funktioniert. Hier wollte ich mehr Kontrolle - und habe Schritt für Schritt verfeinert.

Mein erster Prompt:

"Ich möchte die Hero Section meiner Website als Video. Die einzelnen Elemente sollen nacheinander reinfliegen, dann kurz wackeln, explodieren - und am Ende kommt das Kivocado-Logo und füllt den ganzen Bildschirm aus."

Dann hab ich mir das Ergebnis angeschaut und Schritt für Schritt verfeinert:

"Lass die Elemente von verschiedenen Seiten einfliegen"
"Der Header soll wie auf der Website aussehen - fullwidth"
"Der Banner muss genau wie auf der Website sein"
"Logo am Ende soll das ganze Bild ausfüllen"
"Zoomt zu weit - stopp wenn das Bild ausgefüllt ist"

Das ist der echte Workflow: Beschreiben → Ergebnis ansehen → Anpassen → Wiederholen. Claude Code versteht normale Sprache und setzt es um.

Für wen eignet sich dieser Workflow?

Ideal für:

✓Content Creator ohne Video-Erfahrung
✓Entwickler, die Videos automatisieren wollen
✓Teams, die personalisierte Videos brauchen
✓Schnelle Prototypen und Intros

Weniger geeignet für:

×Klassischen Videoschnitt mit Footage
×Komplexe Motion Graphics
×Wer bereits Premiere/After Effects beherrscht
×Projekte ohne Claude Code Zugang

Fazit

Videos mit Code zu erstellen klingt erstmal absurd. Aber mit Claude Code als Übersetzer zwischen deiner Idee und dem React-Code wird Remotion plötzlich zugänglich.

Das Ergebnis sind keine Hollywood-Produktionen - aber für Intros, Erklärvideos, Social-Media-Content oder personalisierte Videos ist es unschlagbar schnell. Das einfache Intro war in etwa 5 Minuten fertig - ein Prompt, fertig. Die komplexere Hero-Explosion mit mehreren Verfeinerungen hat circa 30 Minuten gedauert. Beides ohne Premiere, ohne After Effects, ohne Lernkurve.

Alternative: Wer lieber KI-generierte Videos ohne Code möchte, sollte sich Google Veo 3 ansehen. Dort beschreibst du per Text, was passieren soll - inklusive automatisch generiertem Sound.

Häufige Fragen

Was ist Remotion?

Remotion ist ein Open-Source-Framework, das Videos aus React-Code generiert. Statt einer Timeline mit Clips arbeitest du mit Komponenten und Animationen - wie beim Bauen einer Website.

Brauche ich Programmierkenntnisse für Remotion?

Nicht unbedingt. Mit Claude Code kannst du Videos erstellen, ohne selbst React oder TypeScript zu beherrschen. Du beschreibst was du sehen willst, und Claude Code schreibt den Code.

Wie funktioniert der iterative Workflow?

Du startest mit einem Plan oder Prompt, schaust dir das Ergebnis an, und verfeinerst mit kurzen Anweisungen. Claude Code versteht natürliche Sprache wie "Logo soll größer sein" und passt den Code entsprechend an.

Ist Remotion kostenlos?

Für persönliche Projekte ist Remotion komplett kostenlos und Open Source. Für kommerzielle Nutzung gibt es kostenpflichtige Lizenzen.

Welche Video-Formate unterstützt Remotion?

Remotion kann MP4, WebM und andere gängige Formate exportieren. Du hast volle Kontrolle über Auflösung, Framerate und Codec.