Was macht Remotion Video?
Erstelle animierte Kurzvideos (1080x1920) mit Remotion. Sechs Videotypen, jeder mit einem Research-Animations-Workflow.
Warum Remotion
Remotion rendert Code, nicht Pixel. KI versteht Code nativ – das Ändern einer Deckkraft-Variable ist eindeutig, im Gegensatz zur Entscheidung, welche Pixel einen „Titel“ in einem Raster-Frame darstellen. Code bedeutet außerdem: auflösungsunabhängige Ausgabe, wiederverwendbare Komponenten, sofortige Vorschau und git-basierte Versionskontrolle.
Voraussetzungen
Dieser Skill erfordert den Remotion Best Practices Skill. Überprüfe vor dem Start, ob Remotion-Skills im Projekt installiert sind. Falls nicht, weise den Nutzer an, folgenden Befehl auszuführen:
npx skills add remotion-dev/skills
Siehe Remotion Agent Skills Dokumentation für Details.
Typauswahl
Bestimme den Videotyp anhand der Nutzereingabe:
| Nutzer gibt an | Videotyp | Referenz laden |
|---|---|---|
| Ein Thema zum Lehren oder Erklären | Erklärvideo (Bildung) | education-explainer.md |
| Eine Produkt-URL | Produktdemo + Launch | product-demo.md |
| Ein Google Business / Maps-Link | Testimonial / Sozialer Beweis | testimonial.md |
| Eine Talking-Head-Videodatei (9:16) | Avatar + animierte Overlays | avatar-overlays.md |
| Eine CSV- oder Datendatei | Datenvisualisierungs-Dashboard | data-viz.md |
| Eine Kanal-/Marken-/Social-URL | Lower Third / Overlay | lower-thirds.md |
Lade nur die relevante Typ-Referenzdatei sowie defaults.md für die gemeinsame Konfiguration (Safe Zone, Schriftarten, Animationsregeln, visueller Stil).
Zusätzliche Referenzen (bei Bedarf laden)
Diese Dateien werden nicht für jedes Video benötigt. Lade sie nur, wenn die Situation es erfordert:
- integrations.md – Lade, wenn der Nutzer Playwright (Web Scraping), Lottie-Animationen, 3D-Assets, Voice-Overs oder KI-generierte Bilder benötigt. Einige Integrationen erfordern API-Keys – frage den Nutzer immer zuerst.
- advanced-patterns.md – Lade, wenn der Nutzer Timing-Schieberegler, Steuerungen für jede Komposition, Multi-Video-Generierung aus einem Katalog, transparentes Rendern, benutzerdefinierte Übergänge oder einen git-basierten Speicher-Workflow wünscht.
Gemeinsamer Workflow
Alle Typen folgen dem gleichen zweischrittigen Muster:
Schritt 1: Recherche / Scraping / Analyse
Sammle Informationen basierend auf dem Videotyp (Thema recherchieren, Website scrapen, Bewertungen scrapen, Video transkribieren oder Daten analysieren). Präsentiere die Ergebnisse und einen vorgeschlagenen Szenenentwurf. Warte auf die Freigabe des Nutzers, bevor du Code schreibst.
Schritt 2: Design & Animation
Erstelle nach der Freigabe alle Szenen als Remotion-React-Komponenten. Befolge die Animationsregeln aus defaults.md:
- Federeingänge (
damping: 200), keine lineare Bewegung - Versetze zusammengehörige Elemente um 8–12 Frames
TransitionSeriesmit 12-Frame-Überblendungen zwischen Szenen- SVG
stroke-dashoffsetfür Diagramm-/Flussdiagrammzeichnungen interpolate()+tabular-numsfür Count-up-Animationen- Partikeleffekte für Höhepunkte/Schlussmomente
Schritt 3: Verfeinerung (optional)
Nachdem das Video korrekt abgespielt wird, biete an, Steuerelemente hinzuzufügen:
- Timing-Schieberegler – siehe advanced-patterns.md zum Hinzufügen von Echtzeit-Steuerungen zu Kompositionen
- Integrationen – siehe integrations.md für Lottie-Animationen, 3D-Effekte, Voice-Overs usw.
Vorschau
Starte nach dem Bauen Remotion Studio:
npx remotion studio
Designprinzipien
- Jede Szene braucht eine klare visuelle Metapher – Diagramme, Flussdiagramme, Symbole, Schritt-für-Schritt-Animationen
- Keine Textwüsten – dichte Informationen, schöne Bewegung, schnelles Tempo
- Kurzgesagt trifft Fireship: komplexe Ideen visuell intuitiv gemacht
- Alle Grafiken werden standardmäßig als SVG-Komponenten erstellt; Lottie und 3D über integrations.md verfügbar
- Respektiere die Safe Zone (siehe defaults.md) – nichts Wichtiges in der Nähe der Ränder
Quellenangabe
Basiert auf Videoprompts von Sabrina Ramonov und Produktionseinblicken aus dem Remotion AI-Videobearbeitungs-Tutorial. Adaptiert als Agent Skill mit konfigurierbaren Voreinstellungen und progressiver Informationsfreigabe.