Remotion wandelt React-Komponenten in gerenderte Videodateien um. Statt Clips auf einer Timeline zu ziehen, schreibst du JSX, definierst Kompositionen und exportierst MP4s ueber die Kommandozeile. Mit 126.000+ Installationen auf skills.sh ist der Remotion-Skill der #4 meistinstallierte Agent-Skill weltweit und der beliebteste fuer programmatisches Video.
HUB-Artikel: Fuer einen Ueberblick ueber alle Videoproduktions-Skills lies beste Agent Skills fuer Videoproduktion 2026.
Was du damit bauen kannst
Mit installiertem Remotion-Skill kann ein AI-Agent Code generieren fuer:
- Produktdemos mit animierten Screenshots und Markenuebergaengen
- Datenvisualisierungen aus JSON- oder API-Daten als Video gerendert
- Social-Media-Clips fuer Shorts, Reels und TikTok mit Text-Overlays
- Animierte Erklaervideos mit Motion Graphics und Schritt-fuer-Schritt-Enthuellung
- Marketingvideos mit konsistenten Markenfarben, Schriftarten und Logo
Verwandt: Nutze den Prompt-Uebersetzer fuer mehrsprachige Videoskripte oder sieh dir den Video-Toolkit-Skill an.
Was ist der Remotion-Skill
Remotion ist ein Open-Source-React-Framework fuer programmatische Videoerstellung. Szenen werden als React-Komponenten definiert, Timing ueber Frame-Nummern gesteuert und als MP4, WebM oder GIF ausgegeben.
Der Remotion-Agent-Skill besteht aus 28 modularen Regeldateien. Nach der Installation erhaelt der Agent Wissen ueber:
- 9 Komponentenmuster (Sequenzen, Serien, Standbilder, Audio, Video, Formen, Text, IFrame, GIF)
- 7 Uebergangstypen (Fade, Slide, Wipe, Flip, Clock Wipe, Custom)
- Animationsprimitive (Feder-Physik, Interpolation, Frame-basierte Keyframes)
- Audio-Integration (Hintergrundmusik, Voiceover-Timing, Lautstaerkeregelung)
- Caption-Generierung aus Audiodateien
- 3D-Rendering mit Three.js
- Deployment-Konfiguration (Lambda, Cloud Run, lokale CLI)
npx skills add remotionFunktioniert mit Claude Code, Codex CLI und Cursor.
Kernfaehigkeiten
Animationen und Bewegung
spring() und interpolate() ermoeglichen physikbasierte, fluessige Bewegungen.
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const scale = spring({
frame,
fps,
config: { damping: 12, stiffness: 200 },
});Abgedeckte Muster: Fade-in, Slide von ausserhalb, Scale-up, gestaffelte Listeneintraege, Ausgangsanimationen.
Captions und Text
@remotion/install-whisper-cpp generiert Untertitel aus Audiodateien. Wortebene-Timestamps, animierte Untertitel-Overlays und Text-Styling mit eigenen Schriftarten und Farben.
Audio-Integration
- Visuelle Uebergaenge mit Audio-Beats synchronisieren
- Mehrere Audioquellen schichten (Voiceover + Musik + Effekte)
- Lautstaerkeregelung pro Track
- Audio-Fade an Szenengrenzen
Uebergaenge
| Uebergang | Effekt | Am besten fuer |
|---|---|---|
| Fade | Opazitaets-Crossfade | Allgemeine Szenenwechsel |
| Slide | Horizontaler/vertikaler Push | Sequenziellen Content |
| Wipe | Richtungsbezogene Enthuellung | Vorher/Nachher-Vergleiche |
| Flip | 3D-Kartenrotation | Feature-Enthuellung |
| Clock Wipe | Kreisfoermiger Sweep | Countdown-Content |
| Custom Spring | Physikbasierte Bewegung | Markenbewegung |
| None | Harter Schnitt | Schnelle Montagen |
Remotion vs traditionelle Videobearbeitung
| Merkmal | Remotion | Premiere/DaVinci | CapCut |
|---|---|---|---|
| Wiederholbarkeit | Deterministisch, identische Ausgabe | Manuell, variiert | Vorlagenbasiert |
| Versionskontrolle | Vollstaendige Git-Historie | Unlesbare Diffs | Keine |
| Batch-Generierung | 100 Varianten aus Daten | Manuell, einzeln | Begrenzt |
| Lernkurve | React + TypeScript noetig | Timeline-Editing-Skills | Niedrig |
| Kosten | Kostenlos (Open Source) | $20-55/Monat | Kostenloser Tarif + Bezahl |
Wann Remotion vs AI-Video-Generatoren
Remotion waehlen wenn:
- Gleiche Videostruktur in Dutzenden oder Hunderten Varianten (Lokalisierung, datengetriebener Content, A/B-Tests)
- Markenkonsistenz wichtig und jeder Frame dem Design-System entsprechen muss
- Content datengetrieben ist (Dashboards, Berichte)
- Versionskontrolle und CI/CD benoetigt werden
AI-Generatoren waehlen wenn:
- Organische, fotorealistische Visuals benoetigt werden, die nicht codiert werden koennen
- Das Video ein einmaliges Kreativprojekt ist
- Vom Textprompt zum fertigen Clip ohne Code gewuenscht
Beide kombinieren: AI-Generatoren fuer B-Roll-Material verwenden, dann Remotion fuer Montage, Branding, Text-Overlays und finale Komposition. Seedance oder Kling fuer AI-Clips generieren und in ein Remotion-Projekt importieren.
Best Practices
- Kompositionen modular halten. Eine Komponente pro Szene, eine Datei pro Komponente.
staticFile()-Helper nutzen. Assets ueber Remotions statisches Dateisystem referenzieren.- FPS und Aufloesung zentral setzen. Auf Kompositionsebene definieren.
- Mit Remotion Studio testen.
npx remotion studiofuer Echtzeit-Vorschau. - Renders cachen. Unveraenderte Frames nicht erneut rendern.
- Videoprojekte in Git verwalten. Remotion-Projekte sind Code, Diffs sind pruefbar.
FAQ
Was ist der Remotion-Agent-Skill?
28 modulare Regeldateien, die AI-Coding-Agenten korrektes Remotion-Code-Schreiben beibringen. Installation mit npx skills add remotion.
Brauche ich React-Erfahrung?
Grundlegendes React- und TypeScript-Wissen hilft. Der Skill behandelt die meisten Remotion-spezifischen Muster.
Remotion vs FFmpeg?
Remotion erstellt Videos aus React. FFmpeg verarbeitet bestehende Dateien (Schnitt, Encoding, Konvertierung). Beide ergaenzen sich. Der ffmpeg-editing-Skill passt gut zu Remotion.
Cloud-Rendering moeglich?
Ja. Remotion Lambda (AWS) und Cloud Run (GCP) fuer serverloses Rendering. Der Skill enthaelt Deployment-Konfigurationsregeln.
Ist Remotion kostenlos?
Kostenlos fuer Einzelpersonen und Unternehmen mit weniger als 3 Mitarbeitern. Groessere Unternehmen benoetigen eine Lizenz. Der Skill selbst ist kostenlos.
