Remotion Video
Erstelle animierte Kurzvideos (1080x1920) mit Remotion. Sechs Videotypen, jeweils mit einem Arbeitsablauf aus Recherche und anschließender Animation.
Warum Remotion
Remotion rendert Code, nicht Pixel. KI versteht Code von Natur aus – das Ändern einer Opazitäts-Variable ist eindeutig, im Gegensatz zur Entscheidung, welche Pixel in einem Rasterframe einen „Titel“ darstellen. Code bedeutet außerdem: auflösungsunabhängige Ausgabe, wiederverwendbare Komponenten, sofortige Vorschau und git-basierte Versionskontrolle.
Voraussetzungen
Diese Fertigkeit erfordert die Remotion-Best-Practices-Fertigkeit. Bevor du beginnst, überprüfe, ob Remotion-Fertigkeiten im Projekt installiert sind. Falls nicht, weise den Benutzer an, Folgendes auszuführen:
npx skills add remotion-dev/skills
Siehe Remotion Agent Skills Dokumentation für Details.
Typauswahl
Bestimme den Videotyp anhand der Benutzereingabe:
| Benutzer gibt an | Videotyp | Referenz laden |
|---|---|---|
| Ein Thema zum Erklären | Erklärvideo (Education Explainer) | education-explainer.md |
| Eine Produkt-URL | Produkt-Demo + Launch | product-demo.md |
| Einen Google-Unternehmens-/Maps-Link | Testimonial / Social Proof | 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 plus defaults.md für die gemeinsame Konfiguration (Sicherheitszone, 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 Benutzer Playwright (Web-Scraping), Lottie-Animationen, 3D-Assets, Voice-Overs oder KI-generierte Bilder benötigt. Einige Integrationen erfordern API-Schlüssel – frage immer zuerst den Benutzer.
- advanced-patterns.md – Lade, wenn der Benutzer Timing-Schieberegler, Steuerungen für jede Komposition, Mehrfachvideogenerierung aus einem Katalog, transparentes Rendern, benutzerdefinierte Übergänge oder einen git-basierten Speicher-Workflow wünscht.
Gemeinsamer Arbeitsablauf
Alle Typen folgen dem gleichen zweistufigen Muster:
Schritt 1: Recherchieren / Scrapen / Analysieren
Sammle Informationen basierend auf dem Videotyp (Thema recherchieren, Website scrapen, Bewertungen scrapen, Video transkribieren oder Daten analysieren). Präsentiere die Ergebnisse und einen Szenenvorschlag. Warte auf die Zustimmung des Benutzers, bevor du Code schreibst.
Schritt 2: Design & Animation
Nach der Zustimmung erstelle alle Szenen als Remotion-React-Komponenten. Folge den Animationsregeln aus defaults.md:
- Feder-Eingä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-/Flussdiagramm-Zeichnungen interpolate()+tabular-numsfür Count-up-Animationen- Partikeleffekte für Feier-/Abschlussmomente
Schritt 3: Verfeinerung (optional)
Nachdem das Video korrekt abgespielt wird, biete an, Steuerungen hinzuzufügen:
- Timing-Schieberegler – siehe advanced-patterns.md zum Hinzufügen von Echtzeitsteuerungen zu Kompositionen
- Integrationen – siehe integrations.md für Lottie-Animationen, 3D-Effekte, Voice-Overs usw.
Vorschau
Nach dem Bau starte Remotion Studio:
npx remotion studio
Designprinzipien
- Jede Szene braucht eine klare visuelle Metapher – Diagramme, Flussdiagramme, Symbole, Schritt-für-Schritt-Animationen
- Keine Textwände – dichte Informationen, schöne Bewegung, schnelles Tempo
- Kurzgesagt trifft Fireship: komplexe Ideen visuell intuitiv gemacht
- Alle Grafiken standardmäßig als SVG-Komponenten; Lottie und 3D verfügbar über integrations.md
- Respektiere die Sicherheitszone (siehe defaults.md) – nichts Wichtiges in der Nähe der Kanten
Quellenangabe
Basiert auf Video-Prompts von Sabrina Ramonov und Produktionserkenntnissen aus dem Remotion AI Video Editing Tutorial. Adaptiert als Agenten-Fertigkeit mit konfigurierbaren Standardeinstellungen und progressiver Informationsdarstellung.