Videos erstellen mit Claude Code und Remotion

Claude Code mit dem Remotion-Skill ist ein Workflow zur Videogenerierung aus natürlichsprachlichen Prompts: Skill installieren, ein Remotion-Projekt scaffolden, das Video in einfachem Englisch beschreiben und Claude frame-genaues React schreiben lassen, das zu MP4 gerendert wird. Das ist der vollständige Ablauf. Die Hürde liegt nie im Prompt selbst – sondern darin, den von Claude gelieferten Code gut genug zu verstehen, um ihn zu korrigieren, wenn die gerenderte Ausgabe von der Anforderung abweicht. Dieser Artikel führt ein entwicklerorientiertes Beispiel von Anfang bis Ende durch und zeigt anschließend, wie man das Remotion-Konzept versteht, um einen fehlerhaften Render aus der Studio-Vorschau heraus zu diagnostizieren, anstatt blind neu zu prompten.

Was dieser Stack ist

Remotion ist ein Open-Source-React-Framework zur programmatischen Videoerstellung: Sie definieren Szenen als React-Komponenten, steuern das Timing mit Frame-Nummern und rendern die Ausgabe als MP4, WebM oder GIF – ohne Timeline-Editor, ohne Drag-and-Drop. Der Remotion-Skill für Claude Code ist ein Regelpaket, das dem Agenten die API-Oberfläche von Remotion beibringt – Kompositionen, Sequenzen, interpolate(), spring(), Render-Konfiguration – damit er korrektes Frame-Rechenwerk erzeugt, anstatt zu raten. Es handelt sich nicht um ein Plugin, das zur Renderzeit ausgeführt wird; es ist Kontext, der in Claude injiziert wird, damit der geschriebene Code so kompiliert und animiert wird, wie Sie es beschrieben haben.

Was ist das Remotion-Konzept?

In Remotion ist Ihr Video eine reine Funktion einer Frame-Nummer. Eine Komposition ist eine React-Komponente mit einer festen Dauer in Frames. Bei 30fps besteht ein 15-sekündiges Video aus 450 Frames, und jede Animation wird als Abbildung vom aktuellen Frame auf einen CSS-Wert ausgedrückt – Opacity, Transform, Farbe. Es gibt keine Timeline; es gibt nur Mathematik.

Vier Grundbausteine tragen das gesamte Konzept, alle dokumentiert in den Remotion-Grundlagen:

• useCurrentFrame() gibt den aktuell gerenderten Frame zurück. Ihre Komponente wird für jeden Frame neu ausgeführt.
• fps und duration liegen auf der <Composition>. Gemäß der Kompositions-Dokumentation setzen Sie dort durationInFrames, fps, width und height.
• <Sequence> verschiebt die Zeit. Ein in <Sequence from={90}> eingebettetes Kind sieht Frame 0, wenn der globale Frame 90 ist – so staffeln Sie Szenen.
• interpolate() bildet einen Frame-Bereich auf einen Wertebereich ab.

Frame-Mathematik, die Sie ständig benötigen werden:

Sobald Sie „Frame rein, CSS-Wert raus” verinnerlicht haben, wirkt der generierte Code nicht mehr wie Magie.

Voraussetzungen und Installation

Sie benötigen Node.js (prüfen Sie die Versionsanforderung auf der Remotion-Einstiegsseite vor der Installation) und Claude Code, den Terminal-Coding-Agenten von Anthropic. Claude Code läuft über ein Claude-Abonnement oder API-Abrechnung – bestätigen Sie die aktuellen Zugriffsvoraussetzungen in Anthropics Claude-Code-Dokumentation, da sich die Verfügbarkeit der Tarife ändern kann.

Nun der Teil, den jedes Tutorial übereilt. Der Installationsbefehl für den Remotion-Skill ist in mindestens drei verschiedenen Varianten in aktuellen Anleitungen aufgetaucht (npx @anthropic-ai/skills add remotion, npx skills add remotion, npx skills add remotion-dev/skills). Das Skills-Packaging befindet sich im Wandel, vertrauen Sie daher keinem kopierten Befehl. Öffnen Sie die offizielle Skills-Seite – remotion.dev/docs/ai/skills – und führen Sie den dort aktuell aufgeführten Befehl aus. Behandeln Sie diese Seite als einzige Quelle der Wahrheit, bis sich das Ökosystem stabilisiert hat.

Stellen Sie zunächst sicher, dass Claude Code in Ihrem PATH verfügbar ist:

claude --version

Installieren Sie dann den Skill mit dem Befehl von der offiziellen Dokumentationsseite und bestätigen Sie die erfolgreiche Installation, indem Sie Claude innerhalb eines Projekts fragen: „Do you have the Remotion skill loaded?”

Ein durchgearbeitetes Beispiel: ein 15-sekündiger Feature-Reveal-Clip

Die stärksten Entwickler-Anwendungsfälle für diesen Stack sind Assets, die Sie aus Daten oder nach einem Zeitplan neu generieren: ein Changelog-Clip aus CHANGELOG.md, ein animiertes Architekturdiagramm, das das aktuelle System widerspiegelt, oder ein Produkt-Feature-Reveal, der bei jedem Release neu gerendert wird. Wir bauen den Feature-Reveal.

Schritt 1 – Scaffolding

Der Scaffold-Befehl ist auf der Remotion-Einstiegsseite dokumentiert:

npx create-video@latest feature-reveal
cd feature-reveal
npm install

Erstellen Sie das Projekt mit einem TypeScript-Template oder einer entsprechenden Konfiguration. Das Scaffolding liefert Ihnen src/Root.tsx (wo Kompositionen registriert werden) sowie eine Starter-Komposition.

Schritt 2 – Claude Code prompten

Öffnen Sie den Agenten im Projekt und machen Sie explizite Angaben zur Frame-Mathematik – hier entstehen die meisten fehlerhaften Ausgaben:

Create a Remotion composition called FeatureReveal.
- 15 seconds at 30fps (450 frames), 1920x1080.
- Dark background (#0d1117).
- A headline "Ship changelogs as video" fades in over frames 0-30,
  holds, then fades out over frames 420-450.
- Three feature rows below the headline, each sliding up from 40px
  with a spring, staggered: row 1 enters at frame 60, row 2 at 90,
  row 3 at 120.
- Register FeatureReveal in Root.tsx with the correct
  durationInFrames and fps.

Schritt 3 – Den generierten Code lesen

Eine korrekte Generierung sieht ungefähr so aus. Die Überschrift verwendet interpolate(); die Zeilen verwenden <Sequence from>-Offsets plus spring():

import {
  AbsoluteFill,
  interpolate,
  spring,
  Sequence,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";

const features = ["One prompt", "Re-render per release", "Version-controlled"];

const FeatureRow: React.FC<{ label: string }> = ({ label }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // spring() returns 0→1; we map it to translateY and opacity.
  const enter = spring({ frame, fps, config: { damping: 14 } });
  const translateY = interpolate(enter, [0, 1], [40, 0]);

  return (
    <div style={{ opacity: enter, transform: `translateY(${translateY}px)` }}>
      {label}
    </div>
  );
};

export const FeatureReveal: React.FC = () => {
  const frame = useCurrentFrame();

  // Headline opacity: in by frame 30, hold, out from 420 to 450.
  const headlineOpacity = interpolate(
    frame,
    [0, 30, 420, 450],
    [0, 1, 1, 0],
    { extrapolateRight: "clamp" }
  );

  return (
    <AbsoluteFill style={{ backgroundColor: "#0d1117", color: "white" }}>
      <h1 style={{ opacity: headlineOpacity, fontSize: 72 }}>
        Ship changelogs as video
      </h1>
      {features.map((label, i) => (
        // Each row starts 30 frames after the last via `from`.
        <Sequence key={label} from={60 + i * 30}>
          <FeatureRow label={label} />
        </Sequence>
      ))}
    </AbsoluteFill>
  );
};

Die Zeile, die man sich merken sollte, ist das interpolate() der Überschrift. Der Aufruf bildet Frame-Nummern auf Opacity-Werte ab: Bei Frame 0 ist die Opacity 0, bei Frame 30 ist sie 1, sie hält bis Frame 420 und blendet bis Frame 450 auf 0 aus. Das Frame-Array und das Werte-Array müssen dieselbe Länge haben, und { extrapolateRight: "clamp" } verhindert, dass der Wert über den letzten Punkt hinaus fortgesetzt wird – der Optionsname und das Verhalten sind in der interpolate()-Referenz dokumentiert.

Die Staffelung ergibt sich aus from={60 + i * 30} auf jeder <Sequence>. Da jede Zeile ihre eigene Sequenz ist, setzt ihr useCurrentFrame() bei ihrem Start-Frame auf 0 zurück, sodass spring() vom Eintrittspunkt der Zeile aus feuert und nicht vom Videobeginn.

Claude muss die Komposition auch in Root.tsx registrieren:

import { Composition } from "remotion";
import { FeatureReveal } from "./FeatureReveal";

export const RemotionRoot: React.FC = () => (
  <Composition
    id="FeatureReveal"
    component={FeatureReveal}
    durationInFrames={450}
    fps={30}
    width={1920}
    height={1080}
  />
);

Wenn durationInFrames und fps hier nicht mit den Frame-Nummern in Ihrer Komponente übereinstimmen, bricht das Timing zusammen. Dies ist die häufigste Ursache für „das Video hat die falsche Länge.”

Schritt 4 – Vorschau im Studio

Starten Sie das Remotion Studio:

npm run dev

Das Studio öffnet sich in Ihrem Browser (beachten Sie den ausgegebenen Port – er ist nicht immer derselbe). Wählen Sie FeatureReveal, drücken Sie Play und ziehen Sie den Abspielkopf. Das Scrubben zu einem bestimmten Frame ist der zentrale Debugging-Schritt: Die Vorschau zeigt Ihnen genau, was Frame N rendert, sodass Sie es mit der Frame-Mathematik in Ihrem Code vergleichen können.

Wie diagnostiziert man einen fehlerhaften Remotion-Render?

Diagnostizieren Sie aus der Studio-Vorschau heraus, nicht anhand einer Liste generischer Fehler. Scrubben Sie zu dem Frame, an dem das Problem auftritt, und lesen Sie den Code, der diesen Frame-Bereich steuert. Drei Fehlermodi erklären die meisten Probleme.

Alles animiert gleichzeitig. Wenn Animationen in der Vorschau gleichzeitig starten, liegt die Ursache fast immer in fehlenden from-Offsets bei <Sequence>-Komponenten: Jede Szene beginnt standardmäßig bei Frame 0, sofern Sie nicht from={startFrame} setzen. Scrubben Sie zu Frame 0 – wenn sich alle drei Zeilen bereits bewegen, sind die Sequenzen nicht gestaffelt. Beheben Sie es mit dem Prompt: „Wrap each feature row in its own <Sequence> with from set to 60, 90, and 120.”

Das Video hat die falsche Länge. Claude generiert Frame-Nummern aus dem von Ihnen angegebenen fps-Wert. Wenn Sie fps nicht angeben, nimmt es einen Standardwert an und berechnet möglicherweise falsch gegenüber einer anders konfigurierten Komposition. Scrubben Sie zum Ende des Abspielkopfs: Wenn Ihre 450-Frame-Animation bei Frame 300 endet, ist durationInFrames der Komposition auf 300 gesetzt. Prompten Sie erneut mit genauen Zahlen – „15 seconds at 30fps is 450 frames; set durationInFrames={450}” – anstatt vage „make it longer” zu sagen.

Bewegungen wirken roboterhaft. Lineares interpolate() ohne Easing wirkt mechanisch. Scrubben Sie durch eine Eingangsanimation: Wenn sie sich mit konstanter Geschwindigkeit bewegt, fehlt das Easing. Wechseln Sie zu spring() für organische Bewegung (es gibt einen 0→1-Wert zurück, den Sie auf ein Transform abbilden), oder übergeben Sie eine easing-Option an interpolate() gemäß der interpolate-Dokumentation. Fragen Sie: „Use spring() for the row entry instead of a linear interpolate.”

Session-Replays von eingebetteten Demo-Videos auf Landing Pages zeigen häufig einen separaten Fehlermodus – das Autoplay einer großen MP4-Datei, die das Rendering blockiert – aber das ist ein Auslieferungsproblem, kein Render-Problem.

Zu MP4 rendern

Rendern Sie über die Kommandozeile mit npx remotion render, wobei Sie die Kompositions-ID und einen Ausgabepfad angeben:

npx remotion render FeatureReveal out/feature-reveal.mp4

Hier ist die Realität, die Prompt-Dumps gerne übergehen. Remotion rendert, indem es headless Chromium startet, jeden Frame als Screenshot aufnimmt und die Frames durch ffmpeg leitet – die Architektur ist in der Rendering-Dokumentation beschrieben. Eine 30-sekündige Komposition bei 30fps bedeutet 900 Browser-Screenshots. Deshalb skaliert die Renderzeit mit der Frame-Anzahl und der Komplexität pro Frame, und deshalb kann eine lange oder visuell aufwändige Komposition auf einem Laptop erhebliche Zeit in Anspruch nehmen, anstatt „in unter einer Minute” zu rendern.

Für Produktions-Pipelines – lange Videos, viele Varianten, CI, das keinen Build-Agenten blockieren darf – ist der dokumentierte Cloud-Pfad von Remotion Remotion Lambda, das die Frames auf parallele Lambda-Funktionen verteilt. Lambda lohnt den Einrichtungsaufwand, sobald die lokale Renderzeit zum Engpass wird oder Sie auf einem Zeitplan rendern müssen, ohne dass ein Entwicklerrechner im Einsatz sein soll. Für einen einmaligen 15-sekündigen Clip rendern Sie lokal und verzichten auf Lambda.

Remotion ist für Einzelpersonen und kleine Unternehmen kostenlos; größere Unternehmen benötigen eine Lizenz – prüfen Sie die aktuellen Bedingungen auf der Remotion-Lizenzseite, bevor Sie kommerziell ausliefern.

Wann sollten Sie Remotion nicht verwenden?

Greifen Sie zu Remotion, wenn das Video datengetrieben, wiederholbar oder auf ein Design-System abgestimmt sein muss – ein Changelog-Clip, ein animiertes Diagramm, ein Release-spezifischer Feature-Reveal. Greifen Sie zu einem traditionellen Editor oder einem KI-Videogenerator, wenn der Inhalt Live-Action, fotorealistisch oder ein einmaliges kreatives Stück ist, bei dem die Iterationskosten des erneuten Renderns den Nutzen der codebasierten Kontrolle überwiegen. Pannen aus einer Talking-Head-Aufnahme herausschneiden, Footage farbkorrigieren oder organische, fotorealistische Bewegungen erzeugen – das sind alles Aufgaben, bei denen Remotion Ihnen Widerstand leisten wird. Die Grenze liegt darin, ob die Ausgabe davon profitiert, ein Programm zu sein: Wenn Sie einmal rendern und nie wieder anfassen werden, ist Code ein Overhead, kein Vorteil.

Die Stärke dieses Stacks liegt im zweiten Render, nicht im ersten. Sobald eine Komposition existiert, ist das Neuerzeugen aus neuen Daten – ein neuer Changelog, eine neue Kennzahl, ein neues Release – ein einziger Befehl. Installieren Sie den Skill von der offiziellen Dokumentationsseite, bauen Sie das Feature-Reveal-Beispiel oben nach und richten Sie dieselbe Komposition dann auf Daten aus, die Sie tatsächlich ausliefern.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.