Communitygithub.com

Reel-Captions-Overlays

Fügt einem fertigen vertikalen Talking-Head-Schnitt einen Referenz-Reel-Beschriftungs- und Overlay-Stil hinzu: schwere konturierte Ein-Wort-Serifen-Beschriftungen unter den Händen, serifenlose Beschriftungen auf B-Roll, ziegelrote Titel-Punch-Cards, rote Gitter-Suchpillen-Bildschirmübernahmen, schwebende geneigte Karten, Schrittlisten, Alt-vs-Neu-Splits, Tool-Chip-Karten, hörbare Produktdemo-Karten und mehr.

Was ist Reel-Captions-Overlays?

Diese Fähigkeit verbessert einen fertigen 9:16-Talking-Head-Schnitt (z. B. aus 'talking-head-edit') mit professionellen Untertiteln und Overlays. Sie generiert aus einem Transkript und einer kleinen `overlays.json` eine vollständige Szene mit Caption-Seiten, animierten Einblendungen und grafischen Effekten und rendert diese standardmäßig mit HyperFrames (Apache 2.0) oder Remotion. Das System unterstützt verschiedene Overlay-Typen (Titelkarten, CTAs, Produktdemos, Schrittlisten) und fügt automatisch einen redaktionellen Grafik-Beat alle 6-10 Sekunden hinzu, um den Reel nicht wie eine Werbung wirken zu lassen. Nach dem Rendern kann optional ein lizenzierter Musik- und Soundtrack (Standard-Preset: steady-funk-bed) hinzugefügt werden, der auf den Stil eines Referenz-Erstellers abgestimmt ist. Die Fähigkeit eignet sich für gesponserte Reels, Interview-Reels und allgemeine Inhalte und bietet eine Verifizierungsstufe (Qualitätskontrolle), die Frame-Genauigkeit, Lesbarkeit auf dem Handy und korrekte CTA-Einblendungen prüft.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/dtenuta/reel-editing-skills/tree/main/skills/reel-captions-overlays

In Ihrer bevorzugten KI fragen

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

Dokumentation

Reel-Beschriftungen + Overlays

Nimmt einen bereits geschnittenen 9:16-Reel (normalerweise 2160x3840 bei 30fps, z. B. das Ergebnis von talking-head-edit) und fügt Beschriftungen und Overlays hinzu. Alles wird von einer edit.json gesteuert (Beschriftungsseiten und Overlays, in Frames), die beide Renderer lesen, sodass die HyperFrames- und Remotion-Versionen Frame für Frame übereinstimmen.

SK=~/.claude/skills/reel-captions-overlays
PY=$($SK/scripts/find_python.sh)                          # faster-whisper large-v3 + opencv ($REELKIT_PYTHON, das Repo .venv, oder python3)
AUDIO_PY=~/.cache/reel-audio/venv/bin/python               # Musik-Stufe (scripts/setup_audio.sh erstellt es)
ANA_PY=~/.cache/reel-audio/analysis-venv/bin/python        # Referenz-Stil-Analyse (scripts/setup_audio.sh --analysis)

Standard-Tool: HyperFrames (Apache-2.0, fixiert auf [email protected]). Remotion (4.0.539) wird als Paritätsbuild unterhalten. Remotion ist für Einzelpersonen und Unternehmen mit bis zu 3 Personen kostenlos; ein größeres Unternehmen benötigt eine kostenpflichtige Unternehmenslizenz für die kommerzielle Nutzung (remotion.pro/license). HyperFrames hat keine solche Lizenzbedingung.

Arbeitsablauf

  1. Einrichtung (erster Durchlauf). $SK/scripts/new_reel.sh <reel.mp4> <workdir> Dies transkribiert mit Wort-Zeitstempeln (large-v3), erkennt Gesichtsboxen alle 0,5s (faces_src.json) und Schnitte (cuts.txt), kopiert overlays.example.json nach <workdir>/overlays.json und stoppt dann.
  2. overlays.json ausfüllen. Lies zuerst words_raw.json.
    • corrections: Markennamen nach Token-Sequenz korrigieren, z.B. ["Ackme"]→"Acme", ["re","-motion,"]→"Remotion,", ["Acme","Voice."]→"Acme Voice.". Das Zusammenkleben von Markenpaaren zu einem Token behält sie auf einer Beschriftungsseite. Behalte fremdsprachige Zeilen genau wie gesprochen bei (z. B. "Même voix, autre langue.").
    • sansWindows: [Start,Ende] Sekunden von B-Roll-Ausblendungen, Übernahmen und promptDemo-Spannen. Beschriftungen wechseln dort zur schweren serifenlosen Schrift (gleiche 75%-Spur).
    • overlays: Siehe die Stilspezifikation unten und den Grafikplan. Zeiten sind in Sekunden, entnommen aus den Wortzeitangaben.
    • sponsored: true für einen bezahlten oder Marken-Reel. Es schaltet die Demo-Beat-Regel (Gesponserte Reels unten) und den Verifikationshinweis ein.
  3. Beide Projekte erstellen. $SK/scripts/new_reel.sh <reel.mp4> <workdir> <workdir>/overlays.json
  4. Vor dem Rendern ansehen. cd <workdir>/hyperframes && npx [email protected] snapshot --at 2.5,20,30 --no-end (oder npx remotion still Reel x.png --frame=N --scale=0.5 in remotion/).
  5. Rendern. Diese benötigen Chrome, also führe sie außerhalb der Bash-Sandbox aus (dangerouslyDisableSandbox). Innerhalb stirbt Chrome bei Mach-Port-Abfragen.
    • <workdir>/hyperframes/render.sh <out>_captions_hyperframes.mp4 rendert ein 1080x1920-Layout, das auf 2160x3840 bei CRF 16 mit Faststart hochskaliert wird.
    • <workdir>/remotion/render.sh <out>_captions_remotion.mp4 macht dasselbe mit --scale=2, CRF 16, AAC 192k und Faststart, führt dann scripts/repair_remotion.py aus (siehe Fallstricke).
  6. Verifizieren. $PY -I $SK/scripts/verify.py <reel.mp4> <out.mp4> <workdir>/edit.json <workdir>/faces_src.json <workdir>/qc <label> (Beendet mit 1 und gibt FEHLER aus, wenn Frames, beschädigte Frames, Lesbarkeit, Kanten der Karten oder das CTA-Angebot fehlschlagen; dauert etwa 9 Minuten bei einem 60s-4K-Reel)
    • Es prüft, ob Frame-Anzahl und Dauer mit der Quelle übereinstimmen.
    • Es scannt jeden Frame auf Beschädigungen (einen falschen Videoframe oder schwarze Kacheln). corrupt_frames muss 0 sein.
    • Es überprüft stichprobenartig 5 Beschriftungsseiten: Der Streifen muss 1 Frame vor dem Start einer Seite leer sein und 2 Frames danach gefüllt.
    • Es misst die Pixeländerung des Gesichtsbereichs unter jedem Overlay. Diese sollte etwa 0 sein, abgesehen von Vollbild-Übernahmen und promptDemo-Karten, die das Gesicht absichtlich verdecken (sie werden von den Gesichts-, Korruptions- und Lesbarkeitsprüfungen ausgenommen).
    • Es listet demo_beats auf (promptDemo-Overlays oder jedes Overlay mit "demo": true). Wenn edit.json sponsored: true hat und es weniger als 2 gibt, gibt es eine WARNUNG aus und fügt sie zu warnings hinzu (kein harter Fehler; behebe den Reel oder erkläre den Grund im Bericht).
    • VOR/NACH-Trennung (v7, Warnung). Für jedes promptDemo-Vorher-Nachher-Zeilenpaar meldet es before_after: die Wörter, die beide Clips teilen, die Lücke im Schnitt und die gemessene Stille im Render, und ob der Schnitt den Umschaltstreifen und das Umschalt-SFX hat (build_edit ba). Ein Paar, das Wörter ohne all dies wiederholt (Lücke >= 400 ms, Streifen, SFX) gibt eine WARNUNG aus: Eine wiederholte Zeile ohne Trenner liest sich als Bearbeitungsfehler (siehe promptDemo).
    • CTA-Angebot (v7, harter Check). Ein cta mit einem offer muss vollständig sichtbar sein >= 2,5 s, bei >= 40px (13+ px auf einem 360px-Handy) und tatsächlich gezeichnet (Pixeländerung in seinem Streifen). <label>_offer_mobile.jpg zeigt es in Handygröße; sieh es dir an. Ein gesponserter Reel, dessen CTA kein offer hat, erhält eine WARNUNG.
    • Lesbarkeit in Handygröße: Es skaliert 8 Beschriftungsseiten auf 360px Breite herunter und misst die Stammdicke, Texthöhe und den Halo (Glyphen-Luma minus den Ring darum). Untergrenzen: Stamm >= 4,0px, Höhe >= 28px, Halo >= 130. legibility_ok muss wahr sein. <label>_mobile.jpg zeigt die Ausschnitte; sieh sie dir an.
    • Es schreibt ein Kontaktblatt mit einem Standbild in der Mitte jedes Overlays und ein Synchronausschnitt-Blatt. Öffne beide, bevor du Bericht erstattest.
  7. Musik + SFX (Standardstufe; überspringen mit --no-music oder MUSIC=0). Fülle <workdir>/music_plan.json aus (kopiert von music_plan.example.json beim ersten Durchlauf; es verwendet das Standard-Stil-Preset steady-funk-bed; siehe Musik und Sounddesign unten), dann $SK/scripts/music_stage.sh <out_hyperframes.mp4> <workdir> <out>_music.mp4 Dies mischt das Bett und SFX unter die Sprache, multiplex es auf das Bild mit einer Videostream-Kopie (keine Neucodierung) und der Audio auf die Videodauer zugeschnitten, erstellt die <out>_music_mobile.mp4-Handykopie (MOBILE_OUT=, um sie woanders hinzulegen) und führt music_verify.py aus, einschließlich der Stilprüfung gegen das Preset des Plans. Es muss BESTANDEN ausgeben. Es weigert sich, eine vorhandene Ausgabe zu überschreiben (FORCE=1, um dies zu erlauben). Es schlägt auch fehl, wenn ein Satz weniger als 6 dB über der darunterliegenden Musik liegt (voice_over_music im Bericht, --min-voice-over-music): Wichtig ist, ob jede Zeile gut zu hören ist. Das Bett ist ein stetiger, ungeduckter Groove, etwa 13 dB unter der Stimme, sodass ein leiser Satz darin versinken kann, selbst wenn der Abschnittsdurchschnitt besteht. Behebe einen Fehler vorgelagert, mit talking-head-edit-Sprachpegelausgleich oder segmentweiser Verstärkung, nicht indem das gesamte Bett heruntergezogen wird. Ein typischer bestandener Interview-Reel maß 11,2 dB Minimum und 14,1 dB Median. Öffne <workdir>/qc/music_sections.png. Der erste Durchlauf erstellt ~/.cache/reel-audio/venv (scripts/setup_audio.sh).
  8. Handykopie (zum Senden, wenn die Musikstufe übersprungen wurde): ffmpeg -i <out.mp4> -vf scale=720:1280:flags=lanczos -c:v libx264 -preset slow -crf 22 -maxrate 2800k -bufsize 5600k -pix_fmt yuv420p -c:a copy -movflags +faststart <out>_mobile.mp4 (etwa 14-19 MB für 60s, unter dem 25 MB-Limit). Kopiere das gemasterte Audio, codiere es niemals neu: Eine zweite AAC-Codierung mit 128k hob den True Peak eines Reels von -1,3 auf -0,7 dBTP an.

Stilspezifikation (aus dem Referenz-Reel)

Alle Größen unten beziehen sich auf den 1080x1920-Entwurfsraum (gerendert mit 2x). Das gemeinsame CSS ist templates/style.css.

  • Beschriftungen (v2: Die v1-Beschriftungen waren dünne weiße Linien, schwer auf einem Handy lesbar. Schwerer, größer, konturiert ist der Standard.)
    • Ein Wort pro Seite, gelegentlich zwei: Ein kurzes Funktionswort verbindet sich mit seinem Nachbarn, und Markenpaare werden zusammengeklebt.
    • Text ist in Groß-/Kleinschreibung und Interpunktion wie gesprochen ("content.", "Then"). Niemals großschreiben. Keine Wort-für-Wort-Hervorhebung: Bei 1-2 Wörtern pro Seite fügt es nur Rauschen hinzu.
    • Schriftart: DM Serif Display (gebündelt, fixiert auf @fontsource/[email protected], OFL) bei 136px, weiß. Niemals zu einer dünnen Serife wie Instrument Serif regular für Beschriftungen zurückkehren. Instrument Serif bleibt für Kartentitel auf Papier oder Rot.
    • Kontur: Eine gestrichelte Kopie des Wortes (::before mit data-t, -webkit-text-stroke: 6px, also 3px außerhalb des Glyphen) in fast schwarz bei 86%, hinter der Füllung platziert, sodass es die Buchstaben nie ausdünnt. Schatten: 0 0 3px, 0 5px 12px und 0 14px 34px, alle dunkel.
    • Anpassung: build_edit.py setzt fs pro Seite aus templates/fonts/caption_metrics.json, sodass eine Seite nie 820px überschreitet (z.B. "automatically." bei 127px). Generiere die Metriken mit scripts/caption_metrics.py neu, wenn sich die Schriftart ändert.
    • Platzierung: Eine Spur zentriert bei 75% der Höhe (y=1440), unter den Händen des Sprechers und dem Mikrofon und über der unteren 20%-UI. Es fällt auf Kinn + 6% (begrenzt auf 76%) nur bei Nahaufnahmen. Bei einem typischen Schreibtisch-Setup sitzen die Hände bei 55-72%, also liegt eine "unter dem Kinn"-Spur (60%) auf den Händen.
    • Animation: Ein 4-Frame-Pop (Skalierung 0,86→1, y 14→0, Ausblendung), der einen Frame früher beginnt, sodass das Wort auf seinem ersten Frame sichtbar ist.
    • Seiten beginnen genau zum Start-Frame des Wortes und halten bis zur nächsten Seite oder bis Wortende + 0,2s, wenn eine Pause vorhanden ist.
  • B-Roll- und Übernahme-Beschriftungen: Inter 900 bei 120px mit Tracking -0,03em, gleiche Kontur und die gleiche 75%-Spur.
  • Titel-Punch-Card (titleCard, für den Hooksatz)
    • Eine ziegelrote #B23A2E Box, 810px breit (75%), mit ihrem oberen Rand bei y=190.
    • Obere Zeile: Anton ALL CAPS bei 118px. Darunter eine weiße Instrument Serif-Untertitel bei 62px.
    • Ihr unterer Rand liegt bei etwa 23% der Bildhöhe. Dies ist bewusst höher als die Referenz (obere Kante 22-28%), da das Gesicht bei etwa 26% beginnt.
  • CTA (cta)
    • Ein weißer kursiver Serifen-"Comment" (82px) über einer roten Box mit dem Anton-Schlüsselwort (196px, z.B. "GUIDE"). Gleicher oberer Streifen wie die Titel-Card.
    • Die Box erscheint 3 Frames nach dem Aufhänger.
    • Angebotszeile (offer, gesponserte Reels, v7): Das Angebot der Marke unter dem Kinn auf einer Papierkarte, z.B. "Use my link for a\nFREE 14-day trial." Verwende die eigene Formulierung der Marke. \n setzt den Zeilenumbruch, und ALL-CAPS-Wörter ("FREE") erhalten eine weiße Box auf rotem Grund. "Comment / WORD" bleibt das Hauptelement; das Angebot ist die unterstützende Zeile. build_edit.py leitet offerF (von offerAt, Standard = CTA-Start + 10 Frames), offerY (Kinn + 3% aus --faces über das CTA-Fenster, bei 55-60% der Höhe gehalten, über der Beschriftungstinte bei etwa 1385px) und offerFs (Inter angepasst auf 720px, max 46px; es warnt unter 40px) ab. Die Karte ist 780px breit (x 150-930, frei von der rechten UI) und um -1,5° geneigt.
    • Das Angebot muss vollständig auf dem Bildschirm sein >= 2,5 s. Wenn der Reel zu kurz nach dem CTA endet, halte den letzten Frame: $SK/scripts/hold_end.sh <reel.mp4> <frames> <reel_hold.mp4> stream-kopiert den Schnitt, hängt N codierte Kopien seines letzten Frames mit digitaler Stille an und prüft, dass die Sprache sample-identisch dekodiert. Wähle N so, dass der Reel kurz vor einem Musikbeat endet (Beat k = k * 60/bpm mit cue_at 0), setze das CTA end und den Musikplanabschnitt end auf die neue Länge und führe build_edit mit dem neuen --frames aus. Das Bett spielt unter dem Hold und schneidet mit dem letzten Frame (Beispiel: 32 Frames, endet bei 68,2 s, kurz vor Beat 125 eines 110 BPM Betts bei 68,207 s; Angebot vollständig oben 3,2 s).
  • Bildschirmübernahme (takeover, für eine Tool- oder Produkterwähnung, gehalten 1,5-3s)
    • Eine Vollbild-tiefrot #8E1F17 mit einem subtilen 8x14 helleren roten Raster.
    • Eine weiße abgerundete Suchpille (Lupe links; Mikrofon und Linse rechts), deren fett-kursive Abfrage über 14 Frames getippt wird.
    • Darunter eine weiße abgerundete Karte mit dem Tool-Namen (Serife 128px), einer einzeiligen Beschreibung, einer roten Wellenform und 2-3 Chips.
    • Fake niemals eine echte Produkt-UI. Verwende die neutrale Karte mit Text. Die Stimme läuft darunter weiter.
  • Schwebende Karte (floatCard, für eine Statistik, einen Tipp oder ein Etikett; optional kicker, width)
    • Eine Papierkarte #FBF7F1, 470px breit, mit ihrem oberen Rand bei y=200, auf der linken oder rechten Seite. Gedreht um ±3-4° mit einem tiefen Schatten.
    • Der Inhalt ist entweder ein optionaler Kicker + große Anton-Zahl + Serifen-Label + kleine Kapitälchen-Zeile oder eine Flaggenvariante: flag: "es" (Kicker + CSS-Flagge + Wort) oder flag: "us-es" (Kicker "Same voice, different language" + US-Flagge → ES-Flagge + Wort).
    • Emoji-Flaggen werden in CSS gezeichnet, sodass sie nie von einer Emoji-Schriftart abhängen.
  • Schrittliste (steps): Eine Papierkarte oben (y 150) mit einem roten Kicker und nummerierten Zeilen (DM Serif 54px). Jeder Eintrag hat seine eigene at-Zeit und erscheint, wenn der Sprecher es sagt; die aktuelle Zahl ist rot, frühere Zeilen sind abgedunkelt. Verwende, wenn der Sprecher "drei Schritte", "zuerst... dann" sagt.
  • Alt vs. Neu Split (split): Zwei geneigte Fenster nebeneinander oben, dunkel "Old way" (durchgestrichen) und rot "New way". Das neue Fenster ...

[... text nach dem Split wurde für die Übersetzung abgeschnitten]

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills