Remotion: Videos mit Code statt von Hand schneiden

Motion Graphics von Hand schneiden ist Fummelarbeit. Keyframe hier, Easing da, und beim fünften personalisierten Video klickst du dieselben Schritte zum fünften Mal. Remotion dreht das um. Ein Video ist hier kein Clip in einem Editor, sondern Code. Genauer: eine React-Komponente, die Remotion für jeden einzelnen Frame neu auswertet. Remotion ist dir vielleicht schon über ein Fireship-Video oder über GitHub Unwrapped begegnet, das jährliche Wrapped-Video für deinen GitHub-Account. Und weil das Video eben Code ist, kann es auch ein LLM schreiben. Dazu am Ende mehr.

In einem Satz

Remotion ist ein React-Framework, das jeden Frame eines Videos als React-Komponente rendert und das Ganze per Headless-Chromium zu einer MP4-Datei zusammenbaut.

In drei Absätzen

Das Leitprinzip steht so in der Doku: ein Video ist eine Funktion von Bildern über die Zeit. Du fragst in deiner Komponente mit useCurrentFrame() ab, bei welchem Frame du gerade bist, und leitest daraus alles ab: Position, Deckkraft, Skalierung, Text. Bei 30 fps ergeben 90 Frames drei Sekunden Laufzeit, gezählt von Frame 0 bis Frame 89. Kein Timeline-Klicken, sondern eine reine Rechnung. Gleicher Input, gleicher Output, jedes Mal.

Mechanisch hast du drei Bausteine. Eine Composition registrierst du in src/Root.tsx mit ihren Metadaten (id, durationInFrames, fps, width, height). Den Frame-abhängigen Verlauf baust du mit interpolate, das einen Wertebereich auf einen anderen mappt, oder mit spring für physikalisch wirkende Bewegung. Die Vorschau läuft live im Browser über Remotion Studio, das fertige Video fällt am Ende per npx remotion render raus. Animiert wird mit ganz normalem Web-Zeug: CSS, SVG, Canvas, WebGL.

Richtig stark wird das, sobald Videos datengetrieben oder personalisiert sein sollen. Hundert Varianten aus einer Tabelle, ein eigener Clip pro Nutzer, automatisierte News-Snippets: alles eine Schleife statt hundert Mal Handarbeit. Der Preis dafür: du brauchst React, und es ist kein Klick-Editor für Nicht-Entwickler. Dazu kommt die Lizenz, die nicht ganz frei ist. Darauf kommen wir gleich zurück, das ist der eine Haken, den man kennen muss.

Tief, wenn du willst

Der Einstieg. Ein neues Projekt scaffoldest du mit einem Befehl, Node 16 oder neuer vorausgesetzt:

npx create-video@latest

Das legt ein lauffähiges Projekt an, inklusive src/Root.tsx und einer Beispiel-Komposition. npm run dev startet danach Remotion Studio im Browser. Du siehst deine Komposition, scrubst durch die Frames und änderst Props live. So weit, so vertraut, wenn du React kennst.

Frame rein, Pixel raus. Das ist der Kern. Eine Komponente fragt den aktuellen Frame ab und rechnet daraus ihren Zustand. interpolate(frame, [0, 30], [0, 1]) heisst: zwischen Frame 0 und 30 steigt der Wert von 0 auf 1. Hier ein Fade-In, das sich gleichzeitig nach oben schiebt:

// src/Root.tsx
import { Composition } from "remotion";
import { FadeIn } from "./FadeIn";

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="FadeIn"
      component={FadeIn}
      durationInFrames={90}
      fps={30}
      width={1280}
      height={720}
    />
  );
};

// src/FadeIn.tsx
import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

export const FadeIn: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
  const y = interpolate(frame, [0, 30], [50, 0], { extrapolateRight: "clamp" });

  return (
    <AbsoluteFill style={{ backgroundColor: "white", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ opacity, transform: `translateY(${y}px)`, fontSize: 80 }}>Hallo Remotion</h1>
    </AbsoluteFill>
  );
};

Das extrapolateRight: "clamp" sorgt dafür, dass der Wert ab Frame 30 bei 1 stehen bleibt statt weiterzulaufen. Spiel das Prinzip mal selbst durch. Zieh am Frame, schau wie sich Deckkraft und Position ergeben:

Das ist das ganze Geheimnis. In Remotion wird Bewegung nicht als fortlaufender Zustand gespeichert, sondern pro Frame aus der Frame-Nummer berechnet. Deshalb ist ein Remotion-Video deterministisch: Frame 47 sieht heute aus wie morgen.

Vom Preview zum MP4. Lokal rendert npx remotion render deine Composition zu einer Videodatei, dokumentiert hier. Wenn es viel wird, kommt Remotion Lambda ins Spiel. Das verteilt den Render auf viele AWS-Lambda-Funktionen, die parallel an verschiedenen Abschnitten arbeiten. Die offizielle Seite nennt einen Durchsatz, bei dem ein 80-Sekunden-Video in etwa 15 Sekunden fällt, ab ungefähr einem Cent pro gerenderter Videominute. Das sind Hersteller-Zahlen und hängen vom Setup ab, aber die Richtung stimmt: du skalierst Video-Rendering wie jeden anderen Cloud-Job.

Die Lizenz, der Haken. Remotion ist nicht klassisches Open Source, sondern source-available. Laut Lizenzseite ist die Nutzung kostenlos für Einzelpersonen, für Non-Profits und für For-Profit-Organisationen mit bis zu drei Mitarbeitenden. Ab der vierten Person im Unternehmen brauchst du eine kostenpflichtige Company License über remotion.pro. Das hat anfangs für Diskussionen gesorgt, der Gründer hat das Modell danach offen als source-available eingeordnet, und die Gebühr trifft eben nur Firmen ab einer gewissen Größe, nicht den Einzelbastler (Einordnung dazu). Wer das vorher nicht checkt, baut sich sonst eine böse Überraschung ins nächste Firmenprojekt.

Der KI-Winkel. Jetzt zu dem Punkt, der Remotion auf einem Blog wie diesem interessant macht. Video als deklarativer, getypter React-Code ist genau die Sorte Output, die ein LLM zuverlässig erzeugt. Keine imperative Timeline, kein Klick-State, sondern Komponenten und Funktionen. Das ist mehr als Theorie: Rubric Labs und Graphite haben mit LLMs plus Remotion personalisierte GitHub-Wrapped-Videos für jeden Nutzer generiert, sauber dokumentiert im LangChain-Blog. Und das Blank-Template von Remotion bringt laut Doku inzwischen “Agent Skills” mit, ein Wink, dass Agent-Workflows offiziell mitgedacht sind. Heisst das, Claude schreibt dir auf Zuruf ein fehlerfreies Video? Nein, so weit ist es nicht, und Benchmarks dazu gibt es keine. Aber die Bausteine passen ja zusammen: ein Modell, das React und TypeScript kann, kann auch eine Composition schreiben. Genau hier löst sich der Aufhänger vom Anfang ein. Nicht mehr von Hand schneiden, sondern die Szene beschreiben und den Code generieren lassen.

Wo dir das diese Woche begegnet ist

Remotion ist sehr lebendig. Das GitHub-Repo steht bei rund 48.700 Sternen (Stand 2026-06-02), die Release-Linie ist 4.0.x mit fast täglichen Versionen, zuletzt um v4.0.471. Wer sehen will, was rauskommt, schaut sich GitHub Unwrapped an, das personalisierte Jahresrückblick-Video, oder das Fireship-Style-Template für diese schnellen Entwicklervideos. An Tutorials mangelt es nicht, etwa der Workshop “render videos with CODE” auf YouTube. Und der KI-Pfad füllt sich gerade, es kursieren erste Community-Anleitungen zu Claude plus Remotion.

Wenn du React kannst und schon mal genervt warst, das fünfte Mal dasselbe Intro zu schneiden: nimm dir zwanzig Minuten. npx create-video@latest, eine Composition mit useCurrentFrame und einem interpolate, einmal rendern. Du merkst schnell, ob das Modell in deinen Kopf passt. Und ob du beim nächsten Mal lieber den Code beschreibst als die Maus zu quälen.

Erklärt 2026-06-02 für kaschnai. Quellen: offizielle Remotion-Doku (Fundamentals, License, Lambda, CLI), GitHub-Repo remotion-dev/remotion, LangChain-Blog zu Rubric Labs/Graphite. Stand der Recherche: 2026-06-02. Versionsstand 4.0.x bewegt sich fast täglich, Lizenz-Schwelle und Versionsangaben vor Weiterverwendung kurz auf der Doku gegenprüfen.