Promo-Videos in Code erstellen

Was macht Promo-Videos in Code erstellen?

Überblick

Ein Promo-Film, der in Code erstellt wird (Remotion: React-Komponenten Frame für Frame gerendert). Er basiert auf vier Prinzipien:

1. Eine Sync-Map steuert alles. Bild, Kamera, Musik und Soundeffekte lesen benannte Trefferpunkte (hits) – eine Umstellung der Zeitsteuerung betrifft alle gleichzeitig.
2. Cast vor dem Schnitt. Der Regisseur/die Regisseurin hört und sieht die Optionen, bevor der Film geändert wird.
3. Vorschauen vor Finalen.
4. Jede Behauptung ist wahr zum Produkt.

Hausregeln zuerst: Lies die eigenen Regeln des Video-Repos, bevor du etwas anderes tust: dessen README, dessen CLAUDE.md oder eine house-rules.md im Repository-Stammverzeichnis. Diese überschreiben die nachfolgenden Standardeinstellungen. house-rules.example.md in diesem Ordner ist eine Vorlage zum Erstellen eigener Regeln.

Einrichten eines neuen Films

• Ein Film pro Branch oder Worktree, in einem reinen Video-Repo, niemals innerhalb der Produkt-App. Jeder Film erhält einen eigenen Ordner: src/videos/<name>/.
• Kopiere templates/ aus diesem Skill in diesen Ordner:
  • sections.ts: die Sync-Map, HITS, TRACK_BPM
  • film-camera.tsx: die 2,5D-Kamera
  • shots.ts: die Shot-Liste
  • Film.tsx: das Kompositions-Grundgerüst, mit der Root.tsx-Registrierung im Header
• Kopiere templates/render.sh und scripts/*.py in das scripts/-Verzeichnis des Repos.
• Abhängigkeiten, alle auf exakt einer Version fixiert: remotion, @remotion/cli, @remotion/motion-blur. Für die Audio-Skripte: ffmpeg, sowie numpy und soundfile.
• Eine Komposition rendert beide Formate über eine format-Eigenschaft (horizontal 1920x1080, vertikal 1080x1920). Jedes Format wird eigenständig layoutet und niemals mit Letterbox versehen.

Arbeitsablauf

1. Storyboard-Spezifikation (verwende die Fähigkeit superpowers:brainstorming, falls installiert). Schreibe sie in docs/.../JJJJ-MM-TT-<name>-design.md. Überprüfe jede im Bildschirm erscheinende Behauptung gegen den Code des Produkts und live-Flags, und formuliere sie so, wie das Produkt es tut.
2. Casting-Board vor jeder Filmbearbeitung. Zeige Stimmen (mit vorgelesenen Zeilen), Tippgeräusche, mehrere Musikoptionen sowie Look- oder Charakter-Entwürfe, jeweils mit einem Code (A1, B4, M1…). Rendere die visuellen Entwürfe als kleine Board-Kompositionen, veröffentliche die Seite privat und warte auf die Auswahl des Regisseurs/der Regisseurin. Wähle niemals eine Stimme, einen Track oder einen Look stillschweigend aus.
3. Bauen.
   • Kopie und Timing leben in der Konfiguration.
   • Szenen, Shots und Sounds referenzieren HITS-Namen, niemals rohe Zahlen.
   • Kameraarbeit: lies camera.md.
4. 720p-Vorschau (scripts/render.sh <Comp> <format> preview <name>-preview-vN-720p). Berichte, was du überprüft hast, was du nicht testen konntest und was du über die Anfrage hinaus geändert hast.
5. Finale nur nach Freigabe: volle Größe, beide Formate. Lange Render-Vorgänge sterben, wenn der Rechner in den Schlafmodus geht – überprüfe daher zuerst die Energieeinstellungen.
6. Commit im Film-Branch. Merge oder Push nur auf Aufforderung. Frühere Filme müssen unverändert rendern.

Audio-Regeln

Regel	Begründung
Rendere das Bild stumm, dann separat mit --codec=wav, dann scripts/mux.py (-15 LUFS mit Limiter).	Remotions In-Render-AAC bringt die gesamte Tonspur 43 ms später.
Musik ist kommerziell lizenziert oder generiert, und jede Datei wird in einer CREDITS.md protokolliert.	Manche „kostenlosen“ SFX-Pakete sind nicht für die kommerzielle Nutzung lizenziert.
Um einen ausgewählten Track anzupassen: scripts/beatgrid.py track [bars] [arc] liefert BPM und Downbeat. Setze TRACK_BPM, schneide dann den Track mit music-edit.py (ganze Takte, überblendet am Downbeat) oder fit-track.py (ein gerades Fenster).	Der Film passt sich dem Track an, nicht umgekehrt.
Stimmen stammen ausschließlich von einem TTS mit kommerzieller Lizenz (Kokoro-82M ist Apache-2.0). Verwende niemals macOS say.	Die say-Lizenz ist persönlich und nicht kommerziell.
Soundeffekte werden deterministisch generiert. Füge jeden neuen Sound am Ende mit einem eigenen PRNG hinzu.	Andernfalls ändert sich jede spätere Datei.
Rufe niemals Math.random() in einem Render auf. Verwende hash() aus film-camera.tsx.	Ein Frame muss jedes Mal gleich gerendert werden.

Qualitätssicherung vor der Übergabe

• Typecheck.
• Lautstärke etwa -15 LUFS und True Peak unter -1 dBTP (ffmpeg -af ebur128). Der rohe WAV-Peak bleibt unter 0,99, sodass nichts clippt.
• Soundeffekte landen auf ihren Treffer-Frames.
• Jeder QR-Code decodiert sowohl bei 1080p als auch bei 720p.
• Rendere Stills jedes geänderten Abschnitts in beiden Formaten (Remotion renderStill) und schau sie dir selbst an. Prüfende Agenten übersehen abgeschnittene Ränder, und eine Überprüfung durch ein kleines, schnelles Modell ist keine dokumentierte Prüfung.

Häufige Fehler

Fehler	Korrektur
Bewegung auf einen rohen Frame, Beat oder Sekunde getaktet	Füge einen benannten Treffer in sections.ts hinzu und referenziere ihn.
Ein Kamera-Roll oder -Tilt, der in spätere Shots überläuft	Keys werden fortgeführt – setze das Feld zurück (roll: 0).
Finale vor Freigabe gerendert	Sende zuerst eine 720p-Vorschau.
Eine Stimme, ein Track oder ein Look, den der Regisseur/die Regisseurin nie gehört oder gesehen hat	Setze es zuerst auf das Casting-Board.
Ein Single-Pass-mp4 mit Audio	Stummes Bild, dann WAV, dann mux.
Vorarbeit unter /tmp für einen mehrtägigen Film	Das System räumt auf. Verwende einen richtigen Worktree-Ordner.
Shell-One-Liner mit $(...) oder Schleifen, die im Automatikmodus abgelehnt werden	Lege die Logik in eine Skriptdatei.