Claude + Remotion: Videos per Prompt

Was Remotion+Claude besonders macht.

Vier Mechaniken, die aus Claude Code einen Video-Editor ohne Timeline machen.

01 · SKILL

skills/remotion/

SKILL.md rules/video-layout.md rules/effects.md

Claude kennt Remotion schon, bevor du fragst.

Der offizielle Remotion-Skill (remotion-best-practices) bringt Claude Code sämtliche Konventionen bei: welche Hooks erlaubt sind, welche CSS-Patterns beim Rendern brechen, wie Assets eingebunden werden. Claude lädt diese Regeln automatisch nach, sobald ein Remotion-Projekt erkannt wird.

02 · CODE-NATIV

interpolate(frame, [0,30], [0,1])

0 30 60

Video ist eine Funktion der Zeit, in echtem React.

Statt Timeline-Ziehen schreibt Claude JSX-Komponenten, die pro Frame neu berechnet werden. useCurrentFrame() liefert die aktuelle Framenummer, interpolate() übersetzt sie in Opacity, Scale oder Position. Das Ergebnis ist deterministisch, versionierbar und diff-fähig wie jeder andere Code.

03 · ITERATIV

Titel Icon

- top: 40px

+ top: 64px

Fehlerhafte Szene? Claude rendert einen Einzelframe und korrigiert.

Statt das ganze Video neu zu rendern, prüft Claude via npx remotion still --frame=30 gezielt einzelne Standbilder, erkennt Überlappungen oder unlesbaren Text und passt den Code direkt an. So entsteht ein enger Feedback-Loop zwischen Prompt, Code und visueller Kontrolle.

04 · SKALIERBAR

Template

Ein Prompt, hundert Varianten.

Weil Remotion-Kompositionen Props wie Zod-Schemas annehmen, kann Claude dieselbe Video-Vorlage mit unterschiedlichen Daten befüllen: 50 personalisierte Social-Clips oder ein Chart-Video pro Kundendatensatz, alles per CLI-Batch statt manueller Klickarbeit.

Wie Claude+Remotion wirklich arbeitet.

01 · Progressive Disclosure

SKILL.md als Kontext-Layer

Ein Agent Skill ist ein Ordner mit einer SKILL.md (YAML-Frontmatter: name, description, metadata.tags) plus optionalen Zusatzdateien unter rules/. Claude scannt beim Sessionstart die Metadaten aller installierten Skills, lädt aber erst bei Bedarf die Detail-Regeln nach, das nennt man Progressive Disclosure. So bleibt der Kontext schlank, obwohl der Remotion-Skill über ein Dutzend Spezial-Regeldateien mitbringt (Untertitel, FFmpeg, 3D, Google Fonts, Voiceover via ElevenLabs, Maps via MapLibre).

02 · Struktur

Composition = Komponente + Metadaten

Jede <Composition> in src/Root.tsx bindet eine React-Komponente an width, height, fps und durationInFrames. Optional berechnet calculateMetadataFunction diese Werte asynchron aus echten Daten (z. B. Audiolänge). <Folder> gruppiert mehrere Compositions im Studio-Sidebar. Praktisch, wenn Claude für eine Kampagne gleich Instagram-Story, Reel und Ad in einem Projekt anlegt.

03 · Rendering

Die Pipeline unter der Haube

npx remotion render startet einen Headless-Chrome-Prozess (Chrome Headless Shell, wird beim ersten Lauf automatisch heruntergeladen), rastert jeden Frame als Bild und übergibt die Sequenz an FFmpeg, das Binary wird seit Remotion v3.3 automatisch in @remotion/renderer mitinstalliert, kein manuelles Setup nötig. Für schnelle Checks nutzt Claude npx remotion still (Einzelframe statt Vollrendering) oder skaliert per --scale=0.25 für zügige Vorschauen.

04 · Restriktionen

Was der Skill Claude verbietet

CSS-transition/animation sowie Tailwind-Animationsklassen sind im Skill explizit als „FORBIDDEN” markiert, weil sie beim Rendern nicht deterministisch greifen, Remotion braucht interpolate()-basierte, frame-exakte Werte. Der Skill zwingt Claude außerdem, Animationswerte einzeln als scale/translate/rotate statt als zusammengesetzten transform-String zu schreiben, damit sie im Studio live editierbar bleiben.

Wer Claude+Remotion wirklich nutzt.

01 · Solo-Marketer

5–10 Social-Clips pro Woche, ohne Editor

Ein Solo-Marketer lässt Claude eine Basis-Composition bauen (Hook-Text, Produkt-Screenshot, CTA-Card) und rendert dann pro Post nur die Props neu: Zitat, Farbe, Bildmaterial ändern sich, das Layout bleibt stabil. Statt jeden Clip in CapCut neu zu schneiden, ändert er eine JSON-Datei und lässt Claude neu rendern.

02 · Agentur-Inhaber

Explainer-Feedback per Prompt statt Re-Cut

Für Kunden-Onboardings baut eine Agentur einen animierten Produkt-Explainer aus Screenshots und Kennzahlen. Claude übernimmt sowohl das React-Layout (Sequence-Timing für „Problem → Lösung → CTA") als auch das Feintuning nach Kunden-Feedback, ein Prompt wie „Der Titel überlappt mit dem Icon in Sekunde 3, behebe das” reicht, weil Claude via Skill weiß, wie man das per interpolate() statt CSS-Hacks löst.

03 · Solo-SaaS-Gründer

Aus CSV-Export wird ein Chart-Reel

Ein Solo-SaaS-Betreiber will für jedes neue Feature ein kurzes Announcement-Video mit Live-Daten (z. B. Nutzerwachstum als animiertes Chart). Claude schreibt eine Data-Viz-Composition, die calculateMetadataFunction nutzt, um echte API-Daten zur Renderzeit einzubinden: aus einer CSV-Exportdatei wird automatisch ein 20-Sekunden-Chart-Reel.

04 · Coach/Berater

Montags-Impuls im immer gleichen Look

Ein Business-Coach produziert eine wöchentliche Zitat-Serie ("Montags-Impuls") im immer gleichen Look. Claude legt einmal die Composition mit Platzhaltern an (Zitat-Text, Hintergrundfarbe, Sprecher-Foto), danach reicht ein kurzer Prompt pro Woche ("Neues Zitat: '…', Farbe Petrol") und Claude rendert automatisch das fertige MP4, kein erneutes Öffnen eines Editors.

Dein Remotion-Starter-Prompt zum Kopieren.

Kopiere diesen Prompt in Claude Code, um dir Remotion Schritt für Schritt erklären und einrichten zu lassen, inklusive Installation und einem ersten lauffähigen Clip.

remotion-starter-prompt.md

Ich möchte anfangen, mit Remotion Videos zu erstellen, also Videos, die man
mit React/TypeScript programmiert, statt sie in einem Timeline-Editor zu
schneiden. Ich kenne Remotion noch nicht. Übernimm die Rolle meines
Remotion-Mentors und arbeite die folgenden Punkte der Reihe nach mit mir durch.

1) WAS IST REMOTION, kurz erklären:
   - Was Remotion ist und wofür es sich eignet (kein Schnitt-Tool, sondern
     "Video als Code": jeder Frame ist eine gerenderte React-Komponente).
   - Was ich damit konkret bauen kann: nenn mir 5–7 realistische Beispiele,
     u.a.: Social-Media-Intros/Outros, animierte Erklär- & Produktvideos,
     datengetriebene Videos (Jahresrückblick, Charts, aus einer Liste
     personalisierte Videos), Untertitel-/Lyric-Videos, Slideshows aus
     Bildern (Ken-Burns), Ads.
   - Wo die Grenzen liegen (kein Echtzeit-Schnitt, Render braucht Chrome
     Headless, keine Live-Kamera).

2) VORAUSSETZUNGEN PRÜFEN:
   - Prüfe per `node -v` und `npm -v`, ob Node (≥ 18, aktuelle LTS) und npm
     installiert sind. Wenn nicht, sag mir, wie ich sie auf meinem System
     nachinstalliere. Frag mich vorher, welches Betriebssystem ich nutze
     (macOS / Windows / Linux).

3) INSTALLIEREN & PROJEKT ANLEGEN:
   - Führe `npx create-video@latest` aus, um ein neues Remotion-Projekt zu
     erstellen, und erklär mir die Ordnerstruktur: src/Root.tsx (Registry
     aller Compositions), die Composition-Datei (das eigentliche Video),
     public/ (Assets wie Bilder, Audio, Fonts).
   - Erklär die wichtigsten Befehle: `npx remotion studio` (Live-Vorschau im
     Browser mit Timeline & Player) und `npx remotion render` (finales MP4).

4) DIE KERNKONZEPTE AN EINEM MINI-BEISPIEL ERKLÄREN:
   - useCurrentFrame() als Zeitachse, interpolate() für Animationen (Werte
     über Frames verrechnen), spring() für physikalische Bewegung,
     <Sequence> zum Timing & Verketten von Szenen, staticFile() für
     Assets aus public/.
   - fps, durationInFrames und width/height in der Composition, wie diese
     zusammen Länge und Format bestimmen.

5) MICH STARTKLAR MACHEN:
   - Richte mir das Projekt tatsächlich ein, starte das Studio und bau als
     "Hallo Welt" einen 5-Sekunden-Clip, in dem mein Name sanft einfadet,
     damit ich sofort ein Ergebnis sehe.
   - Zeig mir am Ende die 3 Befehle, die ich ab jetzt am häufigsten brauche,
     und schlag mir ein erstes eigenes Mini-Projekt zum Üben vor.

Erkläre auf Deutsch, in einfacher Sprache. Geh davon aus, dass ich
React-Grundlagen habe, aber Remotion zum ersten Mal benutze. Erklär jeden
Befehl kurz, bevor du ihn ausführst, und frag nach, wenn dir etwas fehlt.

In 5 Schritten startklar.

01

Node & Remotion-Projekt anlegen

Node ≥ 16 (empfohlen: aktuelle LTS) installieren, dann im Terminal `npx create-video@latest --yes --blank --no-tailwind mein-video` ausführen, das legt ein leeres Remotion-Projekt mit src/Root.tsx an.

02

Remotion-Skill installieren

Im Projektordner `npx skills add remotion-dev/skills` ausführen. Das kopiert SKILL.md + alle rules/*.md-Dateien in dein Agent-Skill-Verzeichnis (z. B. ~/.claude/skills/ bei Claude Code), damit Claude die Remotion-Konventionen automatisch nachlädt.

03

Claude Code im Projekt starten

`claude` im Projektordner öffnen (Pro-, Max-, Team- oder Enterprise-Plan vorausgesetzt), und Claude erkennt das Remotion-Setup und den installierten Skill automatisch.

04

Prompt geben, Vorschau prüfen

Den Video-Prompt (siehe Prompt-Card) an Claude schicken. Parallel `npx remotion studio` offen halten, um die generierte Composition live im Browser-Player zu sehen und Feedback direkt an Claude zurückzuspielen.

05

Rendern

Sobald die Vorschau passt, lässt du Claude `npx remotion render <composition-id> out/video.mp4` ausführen, beim ersten Lauf lädt Remotion automatisch Chrome Headless Shell und FFmpeg-Binaries nach, danach liegt die fertige MP4-Datei im out/-Ordner.

Häufige Fragen.

Brauche ich React-Kenntnisse, um mit Claude und Remotion Videos zu bauen?

Nicht zwingend, aber Grundverständnis hilft. Claude schreibt den React-Code für dich und hält sich dank Skill an Remotions Konventionen, du musst aber in der Lage sein, generierten Code zu lesen und Änderungen konkret zu beschreiben ("Text überlappt in Sekunde 3"), damit Claude gezielt nachbessern kann.

Was genau ist ein „Skill“ im Claude-Kontext, und unterscheidet er sich von einem Custom-Prompt?

Ein Agent Skill ist ein Ordner mit einer SKILL.md (Metadaten + Instructions) und optionalen Zusatzdateien, den Claude Code, Claude Apps oder die API dauerhaft laden können. Anders als ein einmaliger Prompt bleibt der Skill über Sessions hinweg installiert und lädt nur bei Bedarf Detail-Regeln nach (Progressive Disclosure), das spart Kontextplatz gegenüber einem riesigen System-Prompt.

Kostet Remotion etwas?

Für Einzelpersonen, Non-Profits und Unternehmen mit bis zu 3 Mitarbeitenden ist Remotion kostenlos. Größere Firmen benötigen eine kostenpflichtige Company License (Preise auf remotion.pro, genaue Staffelung dort einsehbar). Das Rendering selbst (lokal via npx remotion render) verursacht keine zusätzlichen Cloud-Kosten, solange du nicht auf AWS Lambda oder Google Cloud Run skalierst.

Welchen Claude-Plan brauche ich für Claude Code?

Claude Code ist in Pro-, Max-, Team- und Enterprise-Plänen enthalten (Stand Juli 2026, siehe claude.com/pricing). Der kostenlose Free-Plan reicht für Claude Code nicht aus.

Kann Claude auch Untertitel, Voiceover oder Musik ins Video einbauen?

Ja. Der Remotion-Skill bringt eigene Regeldateien für Untertitel (rules/subtitles.md), Sound-Effekte, Audio-Visualisierung und sogar ElevenLabs-Voiceover-Integration (rules/voiceover.md) mit, und Claude zieht diese automatisch, sobald der Prompt entsprechende Elemente verlangt.

Muss ich FFmpeg oder Chrome selbst installieren?

Nein. Seit Remotion v3.3 wird FFmpeg automatisch als Teil von @remotion/renderer mitinstalliert, und Chrome Headless Shell lädt Remotion beim ersten Render-Lauf selbstständig herunter, falls keine passende Chrome-Version gefunden wird. Unterstützt werden macOS (x64/arm64), Windows (x64) und Linux (x64/ARM).

Videos schreiben, nicht schneiden.