Reel

Aus einem Thema ein postfertiges, animiertes 9:16-Reel bauen. Alles lokal und deterministisch. Am Ende liegt eine MP4 da, die nur noch Musik und einen Upload braucht.

Ein Video, drei Kanäle: Instagram Reels, TikTok und YouTube Shorts. 1080 × 1920 bei 30 fps ist überall das native Format. Immer die Quelldatei hochladen, nie einen Export aus einer anderen Plattform. Fremde Wasserzeichen drücken die Ausspielung.

Ablauf

1. Thema und Aussage klären. Ein Reel trägt genau einen Gedanken.
2. Eigenen Arbeitsordner anlegen. Nie einen geteilten benutzen, siehe Fallstricke.
3. assets/anim_template.html kopieren und die Segmente füllen. Das HTML leitet seinen Zustand aus ?f=<nummer> ab, jeder Frame ist damit reproduzierbar.
4. Rendern:

   python scripts/render_reel.py --html anim.html --frames 465 --out reel.mp4

   Optionen: --fps 30 --width 1080 --height 1920 --workers 6 --keep-frames
5. Ansehen, dann Caption und Schnittzeitpunkte dazugeben.

Marke

Farben, Schrift, Wortmarke und Ton stehen in einer eigenen Datei, Vorlage: examples/brand.example.md. Für eine andere Marke eine zweite Datei nach demselben Aufbau anlegen. Die Vorlage bleibt gleich, nur die Werte ändern sich.

Layout und Safe Zones

Instagram und TikTok legen ihre Bedienoberfläche über das Video. Unten Caption und Button, rechts die Icon-Spalte.

• Alles Wichtige in die vertikale Mitte. Die Vorlage zentriert Segmente deshalb.
• Unteres Sechstel und rechter Rand: nichts Wichtiges. Wortmarke oben links und Handle unten links dürfen teilweise verdeckt werden.
• TikTok verdeckt unten mehr als Instagram (Caption plus Sound-Zeile). Auf Nummer sicher: das untere Fünftel frei halten.
• Schrift groß. Auf 1080 Breite: Headline 100 bis 130 px, Zahlen bis 190 px, Fließtext nicht unter 34 px. Auf dem Handy schrumpft alles auf etwa ein Drittel.
• Hochzählende Zahlen brauchen font-variant-numeric: tabular-nums, sonst zappelt die Breite bei jedem Wechsel.

Bekannte Fallstricke

Alle real aufgetreten. Die Skripte fangen sie ab, deshalb nicht „vereinfachen", ohne das hier gelesen zu haben.

1. --headless=new schreibt teils gar keine Screenshot-Datei, ohne Fehlermeldung und ohne Exit-Code. --headless=old ist für reine Screenshot-Jobs stabil.
2. PowerShells Start-Process -ArgumentList <array> zerlegt Pfade mit Leerzeichen. Chrome meldet dann „Multiple targets are not supported in headless mode". Besser über Pythons subprocess mit Argumentliste gehen.
3. Direkt in einen Cloud-Sync-Ordner rendern schlägt sporadisch fehl (OneDrive, Dropbox), weil der Sync den Ordner sperrt. Chrome schreibt die PNG dann kommentarlos nicht. Immer lokal in ein Temp-Verzeichnis rendern und am Ende einmal kopieren.
4. Jede parallele Chrome-Instanz braucht ein eigenes --user-data-dir, sonst blockieren sie sich über die Profilsperre.
5. Schrift nicht per <link> laden, sondern einbetten (scripts/embed_font.py). Bei hunderten cache-losen Renders rendert sonst irgendwann einer im Fallback. Das ist genau ein sichtbarer Ruckler im Video, und die Ursache ist schwer zu finden.
6. -pix_fmt yuv420p ist Pflicht. Ohne spielen Instagram und viele Player das Video nicht ab oder zeigen Farbmatsch.
7. Ein geteilter Arbeitsordner ist eine Falle. Zwei parallel laufende Durchgänge überschreiben sich die anim.html. Eigener Ordner pro Reel.
8. Der bloße String fonts.googleapis.com im HTML ist kein Beweis für externes Laden. Wenn du prüfst, ob eine Schrift extern geladen wird, prüfe die Ladeposition (<link>, @import, src: url(https://...)), nicht das Vorkommen der Zeichenkette.

Was am Ende herauskommt

• die MP4 (1080 × 1920, 30 fps, H.264 High, yuv420p, faststart)
• die anim.html daneben, damit spätere Änderungen möglich sind
• die Caption und die Schnittzeitpunkte für die Beats

Sag ehrlich dazu, was noch fehlt: Musik, denn ohne Ton wirkt auch ein animiertes Reel flach, und idealerweise ein echter gefilmter Hook-Shot von zwei Sekunden am Anfang. Animation ersetzt keinen physischen Hook.

Voraussetzungen

Python 3, Google Chrome, ffmpeg. Beide werden im PATH und an den üblichen Orten gesucht, sonst über CHROME_PFAD und FFMPEG_PFAD setzen.