Communitygithub.com

kuzeyozel-1/remotion-video-pipeline

Erstelle kurze Promo-Videos (vertikale 9:16 Reels, 16:9 Web-Spots) aus rohem Telefon-/Kameramaterial mit Remotion – inklusive Proxy-Generierung, Kontaktbögen zur Clip-Auswahl, Branding und den Render-Fallstricken, die Stunden kosten (türkische Großbuchstaben, ffmpeg stdin, HEVC-Ausgabe, fehlendes drawtext). Verwende dies, wenn der Benutzer sagt: „make a promo video“, „reel from this footage“, „Remotion“, „tanıtım videosu“, „kısa video render“ oder codegesteuerte Text-/Branding-Overlays über echtem Filmmaterial benötigt.

Was ist remotion-video-pipeline?

Diese Fähigkeit definiert einen vollständigen Pipeline-Workflow zur Erstellung von kurzen Promo-Videos mit Remotion – sowohl vertikale 9:16 Reels als auch horizontale 16:9 Web-Spots – aus rohem Telefon- oder Kameramaterial. Der Prozess umfasst die Inventarisierung von Clips, die Erstellung von Proxys (Vorschaukopien) zur Vermeidung von Performance-Problemen mit 4K- oder HEVC-Quellen, die Generierung von Kontaktbögen mit einem Frame pro Sekunde zur visuellen Auswahl der Schnittzeitpunkte, und die Komposition in einer wiederverwendbaren Vorlage mit Footage-, Scrim- und Text-Ebenen. Die Render-Konfiguration ist bereits optimiert (H.264, CRF 17, yuv420p), und es gibt eine Reihe von Fallstricken, die in der Praxis Zeit kosten – etwa der `text-transform: uppercase`-Fehler bei türkischem `i` wenn `lang` nicht korrekt gesetzt ist, das Verschlingen von stdin durch `ffmpeg` in `while read`-Schleifen, Shell-Scripting-Unterschiede zwischen zsh und bash, das Fehlen von `drawtext` in vielen ffmpeg-Builds, und Probleme mit HEVC-Ausgabe und Hintergrund-Render-Prozessen. Die detaillierte Dokumentation in SKILL.md listet jeden Schritt, die typischen Fehlerquellen und praktische Lösungen, sodass Entwickler schnell und zuverlässig hochwertige, markenkonforme Videoclips rendern können, ohne stundenlang an subtilen Rendering-Problemen zu hängen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kuzeyozel-1/vinci-skills/tree/main/skills/remotion-video-pipeline

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Remotion Video-Pipeline

Reales Filmmaterial + codegezeichnete Typografie = markenkonforme Videos ohne Tippfehler und mit wiederholbaren Bearbeitungen.

Pipeline

  1. Inventar der Rohclips erstellen: scripts/inventory.sh <raw-dir> > index.tsv (ID, Pfad, Dauer, Auflösung).
  2. Proxies: scripts/make-proxies.sh index.tsv proxy/ erstellt 1080 Pixel breite, 30 fps, all-intra-ähnliche H.264-Kopien (-g 15) ohne Audio. Bearbeite und rendere gegen Proxies; 4K/HEVC-Originale verlangsamen Remotion bei der Suche und können Chrome zum Absturz bringen.
  3. Momente durch Anschauen wählen, nicht durch Raten: scripts/contact-sheet.sh proxy/v01.mp4 sheets/v01.jpg gibt ein Raster mit einem Bild pro Sekunde aus. Öffne das Blatt und notiere die Startsekunden pro Schnitt.
  4. Komponieren in template/ (kopiere es): Footage (beschnittener, gezoomter Clip), Scrim (Farbverlauf für lesbaren Text), Line (animierter Text). Eine Komposition pro Ausgabe (z. B. Main 30 s, Teaser 9 s, Spot16x9 20 s).
  5. Rendern: npx remotion render <CompositionId> out/<name>.mp4. Die Konfiguration setzt bereits H.264, CRF 17, yuv420p.
  6. Überprüfen: 3 Standbilder extrahieren (ffmpeg -ss 5 -i out.mp4 -frames:v 1 still.png) und betrachten; Dauer prüfen und sicherstellen, dass die Audio-Richtlinie (stumm oder Musik) dem Kundenwunsch entspricht.

Fallstricke (jeder hat echte Zeit gekostet)

  • Setze lang="tr" (oder die richtige Sprache) auf dem Root-Element; sonst verwandelt CSS text-transform: uppercase das türkische i in I (MAKINASI, TEKLIF). Gib die endgültige Groß-/Kleinschreibung am besten direkt im String an.
  • ffmpeg innerhalb von while read-Schleifen schluckt stdin: immer -nostdin übergeben.
  • zsh trennt anders als bash: set -- $p und $2:s brechen. Skripte mit #!/usr/bin/env bash schreiben.
  • Viele ffmpeg-Builds haben kein drawtext. Text in Remotion zeichnen, niemals in ffmpeg.
  • HTML-basierte Renderer (z. B. Hyperframes) lassen möglicherweise „dim“-Overlay-Ebenen zwischen Szenen sichtbar; auch Szenen mit expliziter Deckkraft-Animation überblenden. Diese Renderläufe im Vordergrund ausführen (Hintergrund-nohup-Läufe werden abgebrochen) und HEVC-Ausgabe mit ffmpeg -i in.mp4 -c:v libx264 -crf 18 -pix_fmt yuv420p out.mp4 konvertieren.
  • Rotation von Handyaufnahmen: ffprobe-Rotations-Tags prüfen; Hochformat-Clips in einer Querformat-Komposition benötigen objectFit: cover plus expliziten Beschnitt.
  • Nur das angeben, was das Filmmaterial zeigt. Keine Spezifikationen, Kapazitäten oder Preise im eingeblendeten Text erfinden.
  • Kundenmaterial aus dem veröffentlichten Repository heraushalten; Filmmaterial und Logos gehören dem Kunden.

Siehe references/checklist.md für die Ausgabe-Checkliste.

Verwandte Skills