Remotion Video Toolkit
Schreibe React-Komponenten, erhalte echte MP4-Videos. Dieses Skill lehrt deinen KI-Agenten, wie man mit Remotion arbeitet – von der ersten Animation bis zur Produktions-Rendering-Pipeline.
29 Regeln. Jede wichtige Remotion-Funktion abgedeckt.
Was du damit bauen kannst
Personalisierte Videos in großem Maßstab Füge Benutzerdaten als JSON-Props ein und rendere ein individuelles Video pro Benutzer. Stell dir Spotify Wrapped, GitHub Unwrapped oder Einführungswalkthroughs vor – eine Vorlage, tausende Ausgaben.
Automatisierte Social-Media-Clips Ziehe Live-Daten (Statistiken, Bestenlisten, Produktmetriken) und rendere tägliche oder wöchentliche Videobeiträge, ohne dass jemand einen Timeline-Editor berührt.
Dynamische Anzeigen und Marketingvideos Tausche Kundennamen, Produktbilder, Preise aus. Gleiche Vorlage, unendliche Variationen. Rendere serverseitig über API oder Lambda.
Animierte Datenvisualisierungen Verwandle Dashboards und KPI-Berichte in teilbare Videoclips mit animierten Diagrammen und Übergängen.
TikTok- und Reels-Untertitel Transkribiere Audio, zeige wortgenaue hervorgehobene Untertitel an und exportiere bereit zum Hochladen.
Produktvorstellungsvideos Automatisch aus deiner Datenbank generiert – Bilder, Spezifikationen, Preise – direkt als MP4.
Bildungs- und Erklärinhalte Animierte Kursmaterialien, Zertifikatsvideos, Schritt-für-Schritt-Walkthroughs – alles codegesteuert.
Videogenerierung als Dienstleistung Stelle das Rendering als HTTP-Endpunkt bereit. Deine App sendet JSON und erhält eine Videodatei zurück.
Voraussetzungen
- Node.js 18+
- React 18+ (Remotion rendert React-Komponenten Frame für Frame)
- Remotion – Scaffolding mit
npx create-video@latest - FFmpeg – Wird mit
@remotion/renderermitgeliefert, keine separate Installation nötig - Für serverloses Rendering: AWS-Konto (Lambda) oder GCP-Konto (Cloud Run)
Was enthalten ist
Kern
| Regel | Beschreibung |
|---|---|
| Kompositionen | Videos, Standbilder, Ordner, Standard-Props, dynamische Metadaten definieren |
| Rendering | CLI, Node.js-API, AWS Lambda, Cloud Run, Express-Server-Muster |
| Metadaten berechnen | Dauer, Abmessungen und Props zur Renderzeit dynamisch setzen |
Animation und Timing
| Regel | Beschreibung |
|---|---|
| Animationen | Einblenden, Skalieren, Drehen, Verschieben |
| Timing | Interpolationskurven, Easing, Federphysik |
| Sequenzierung | Szenen verzögern, verketten und orchestrieren |
| Übergänge | Szenenübergänge |
| Trimmen | Anfang oder Ende einer Animation abschneiden |
Text und Typografie
| Regel | Beschreibung |
|---|---|
| Textanimationen | Schreibmaschineneffekt, Worthervorhebung, Aufdecken |
| Schriftarten | Google Fonts und lokale Schrifteinbindung |
| Text messen | Text an Container anpassen, Überlauf erkennen |
Medien
| Regel | Beschreibung |
|---|---|
| Videos | Einbetten, Trimmen, Geschwindigkeit, Lautstärke, Schleife, Tonhöhenverschiebung |
| Audio | Importieren, Trimmen, Ausblenden, Lautstärke- und Geschwindigkeitsregelung |
| Bilder | Die Img-Komponente |
| GIFs | Zeitachsensynchrone GIF-Wiedergabe |
| Assets | Importieren beliebiger Medien in Kompositionen |
| Decode-Check | Browserkompatibilität validieren |
Untertitel und Bildunterschriften
| Regel | Beschreibung |
|---|---|
| Untertitel transkribieren | Audio in Untertitel mittels Whisper, Deepgram oder AssemblyAI |
| Untertitel anzeigen | TikTok-ähnliche wortweise Hervorhebung |
| SRT importieren | Vorhandene .srt-Dateien laden |
Datenvisualisierung
| Regel | Beschreibung |
|---|---|
| Diagramme | Animierte Balkendiagramme, Liniengraphen, datengesteuerte Visualisierungen |
Erweitert
| Regel | Beschreibung |
|---|---|
| 3D-Inhalte | Three.js und React Three Fiber |
| Lottie | After-Effects-Animationen via Lottie |
| TailwindCSS | Kompositionen mit Tailwind stylen |
| DOM-Messung | Elementabmessungen zur Renderzeit messen |
Medien-Dienstprogramme
| Regel | Beschreibung |
|---|---|
| Videodauer | Länge in Sekunden ermitteln |
| Videoabmessungen | Breite und Höhe ermitteln |
| Audiodauer | Audiomateriallänge ermitteln |
| Frames extrahieren | Frames zu bestimmten Zeitstempeln extrahieren |
Schnellstart
# Projekt erstellen
npx create-video@latest my-video
# Im Browser anzeigen
cd my-video && npm start
# Als MP4 rendern
npx remotion render src/index.ts MyComposition out/video.mp4
# Dynamische Daten übergeben
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hallo"}'
Mitwirken
Quellcode: github.com/shreefentsar/remotion-video-toolkit
Fehlt etwas? Hast du einen besseren Ansatz gefunden? Eröffne einen PR – neue Regeln, verbesserte Beispiele, Fehlerkorrekturen sind willkommen.
Erstellt von Zone 99