Remotion | Make videos programmatically

Remotion – Erstellen Sie Videos programmatisch mit React

Was ist Remotion?

Remotion ist ein Framework zur Videocreation, das Entwicklern ermöglicht, hochwertige Videos mit React-Komponenten zu erstellen. Sie schreiben Code, anstatt Timeline-Editoren zu verwenden. Videos werden Frame für Frame gerendert, was volle Kontrolle über Layouts, Animationen und datengesteuerte Inhalte bietet.

Warum Remotion verwenden?

• Code-basierte Videogenerierung: Verwenden Sie React/JavaScript, um dynamische Visuals, Motion Graphics und Animationen zu erstellen.
• Volle Komponierbarkeit: Wiederverwendung von Komponenten, Templates und Integration mit CSS, SVG, Canvas, WebGL.
• Skalierbare Rendering-Optionen: Rendern Sie lokal, serverseitig oder über Cloud-Dienste wie Remotion Lambda.
• Enterprise-ready Features: Enthält Lizenzierungsoptionen für Teams, Prioritäts-Support und großflächige Nutzung.

Kernfunktionen

• React-Frame-Rendering: Verwenden Sie useCurrentFrame() und useVideoConfig(), um zu steuern, was in jedem Frame erscheint.
• Kompositionen: Definieren Sie mehrere „Videos“ mit unterschiedlichen Dimensionen, Dauer und Bildraten innerhalb eines Projekts.
• Timeline & Editor Starter: Enthält eine integrierte Timeline-UI, mehrere Ebenen, Filmstreifen-Vorschau, Drag-and-Drop, Zoom und grundlegende Bearbeitung.
• Umfangreiche API-Unterstützung: Zugriff auf Komponenten wie <Video>, <Audio>, <Image>, Interpolationsfunktionen (interpolate, spring, etc.), Lottie, Three.js-Integrationen.
• Datengetriebene und dynamische Inhalte: Verwenden Sie API-Aufrufe, JSON-Daten oder externe Quellen, um personalisierte oder automatisierte Videos zu generieren (z.B. YouTube Wrapped-Stil).

Erste Schritte

1. Installieren Sie die Voraussetzungen: Node.js ≥ 16 oder Bun ≥ 1.0.3.

2. Erstellen Sie ein neues Projekt:

   npx create-video@latest
   

   oder verwenden Sie pnpm, yarn oder bun.

3. Starten Sie die Entwicklungsumgebung:

   npm run dev
   

   oder npm run remotion, um das Remotion Studio zu öffnen.

4. Definieren Sie Ihre <Composition />-Komponenten in src/Root.tsx, geben Sie Breite, Höhe, Dauer und Bildrate an.

5. Verwenden Sie innerhalb Ihrer Komposition React-Komponenten und Animations-Hooks (useCurrentFrame, useVideoConfig), um Visuals über die Zeit zu rendern.

6. Rendern Sie die endgültige Ausgabe:

   npx remotion render [Kompositions-ID] [Ausgabedatei.mp4]
   

7. Für Cloud-Rendering oder Automatisierung erkunden Sie Remotion Lambda oder ähnliche serverseitige Tools.

Anwendungstipps

• Verwenden Sie Animationen via Code: interpolate, spring, interpolateColors bieten präzise Kontrolle.
• Strukturieren Sie komplexe Visuals mit wiederverwendbaren React-Komponenten.
• Vorschau häufig mit dem integrierten Studio für schnellere Iteration.
• Für skalierbares Rendering verbinden Sie Cloud- oder Server-Tools – ideal für automatisierte dynamische Kampagnen.

FAQ

F: Ist Remotion kostenlos?
A: Eine kostenlose Lizenz deckt die individuelle Nutzung und bis zu 3 Entwickler ab. Teams (4+) oder Unternehmen benötigen eine bezahlte Company- oder Enterprise-Lizenz (ab $100–500/Monat) mit Prioritäts-Support und Credits.

F: Wie wird React-Code zu Video?
A: Remotion gibt Ihnen eine Frame-Nummer und eine leere Leinwand. Es rendert jeden Frame, indem es Ihre React-Komponenten ausführt, und fügt sie dann mit Puppeteer + FFMPEG oder WebCodecs zu einem vollständigen MP4-Video zusammen.

F: Wie vergleicht sich Remotion mit Motion Canvas?
A: Remotion verwendet einen vollständigen DOM-Baum für das Rendering mit React, während Motion Canvas über einen einzigen <canvas>-Kontext und eine imperative API arbeitet. Remotion unterstützt das Einbetten komplexer Webinhalte, während Motion Canvas für Vektoranimationen optimiert ist. Remotion bietet Skalierbarkeit und Enterprise-Features; Motion Canvas ist einfacher und vollständig Open-Source.

F: Brauche ich eine GUI?
A: Nein. Sie schreiben React-Code, um Ihr Video zu erstellen. Remotion Studio bietet eine visuelle Schnittstelle für Vorschau und Bearbeitung, aber die gesamte Logik liegt im Code.

F: Kann ich Daten abrufen und Videos dynamisch generieren?
A: Ja. Sie können APIs, JSON oder Laufzeitdaten integrieren, um Videos programmatisch zu produzieren (z.B. wöchentliche personalisierte Clips).