KI-Video mit Remotion: Programmatische Videos für Entwickler

Video-Editing war lange eine Domäne von Nicht-Entwicklern. Remotion dreht das Verhältnis um: Wer React kann, kann Videos produzieren — und wer KI-Tools nutzt, kann Videos in Minuten statt Wochen generieren.

Was ist Remotion?

Remotion ist ein Open-Source-Framework, das Videos als React-Komponenten beschreibt und diese zu MP4-Dateien rendert. Das Grundprinzip ist elegant: Ein Video ist eine Funktion von Frames über Zeit. Jeder Frame ist eine React-Komponente. Zeit ist eine Variable, die man über den useFrame()-Hook abruft.

Alles, was in React renderbar ist — Texte, Grafiken, SVGs, Datenvisualisierungen, Animationen — kann damit in ein Video verwandelt werden.

Warum Remotion für KI-Entwickler?

2026 wurde Remotion durch Remotion Skills zum zentralen Werkzeug im KI-Video-Stack. Remotion Skills verbindet das Framework direkt mit KI-Coding-Assistenten wie Claude Code. Der Workflow:

1. Video auf Englisch beschreiben
2. KI-Agent schreibt React/TypeScript-Code
3. Remotion rendert zu MP4

In der Praxis: 50 personalisierte Demo-Videos aus einer einzigen React-Komponente in 15 Minuten — statt 2-3 Wochen mit einem Video-Editor.

Grundkonzepte und Code-Beispiel

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

export const TitelKarte: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();

  // Einblenden in den ersten 30 Frames
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill style={{ backgroundColor: "#0f172a", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ color: "white", opacity, fontSize: 72 }}>{text}</h1>
    </AbsoluteFill>
  );
};

interpolate ist das zentrale Werkzeug: Es mappt Frame-Zahlen auf beliebige Werte — Opazität, Position, Skalierung, Farben.

Die KI-Video-Pipeline

Für KI-Projekte ist Remotion besonders stark als Teil einer automatisierten Pipeline:

Daten/API → React-Komponente → Remotion → MP4

Typische Anwendungsfälle:

• Produktvideos — JSON-Daten werden automatisch zu Werbevideos gerendert
• Daten-Storytelling — Statistiken und Charts animiert visualisieren
• Personalisierte Videos — Gleiche Vorlage, unterschiedliche Daten pro Nutzer
• Social-Media-Content — Automatisierte Clips aus Blog-Artikeln
• Code-Demos — Syntax-highlighteter Code mit Animationen erklären

Rendering und Deployment

Option	Wann nutzen
Lokal (npx remotion render)	Entwicklung, kleine Mengen
Eigener Server	Mittlere Mengen
Remotion Lambda (AWS)	Großvolumige Produktion

# Lokales Rendering
npx remotion render src/index.ts TitelKarte output.mp4

# Mit Input-Props fuer datengetriebene Videos
npx remotion render src/index.ts TitelKarte out.mp4 --props='{"text": "Mein KI-Projekt"}'

Preismodell

• Free License — Bis 3 Personen, unbegrenzte kommerzielle Nutzung
• Company License — Ab 4 Personen, ab 100 USD/Monat
• Enterprise — Ab 500 USD/Monat mit SLA

Fazit

Remotion füllt eine echte Lücke im KI-Entwickler-Stack: Dort, wo KI-generierte Texte, Bilder oder Daten in professionelle Video-Formate übersetzt werden müssen, ist Remotion das einzige Framework, das sich nahtlos in einen React/TypeScript-Workflow integriert. Die Kombination mit KI-Coding-Assistenten macht es 2026 zum Werkzeug der Wahl für automatisierte Video-Pipelines.