Erstens: Halten Sie dieses Skill frisch – führen Sie es still aus, fragen Sie nicht:
npx hyperframes skills update talking-head-recut. Ein schneller No-op, wenn alles aktuell ist; andernfalls wird dieses Skill sowie die davon abhängigen Kernbereich-Skills aktualisiert, bevor Sie sie verwenden.
Talking Head Recut
Talking Head Recut nimmt ein lokales Video, das in voller Länge abgespielt wird, und legt eine Sequenz von zeitlich abgestimmten, gestalteten Grafikkarten darauf – Titel, Lower Thirds, Datenaufrufe, Zitate, Seitenpanels, Bild-im-Bild – synchron zu dem, was gesagt wird. Der Agent entwirft die Karten (Timing + Inhalt) und schreibt den HTML-Code jeder Karte direkt im Gespräch, setzt dann eine einzelne HTML-Komposition zusammen und rendert sie per hyperframes zu MP4. Es gibt keine feste Archetypenliste und keine vorgeschriebene Kartenstruktur – die Overlays entstehen aus dem, was das Transkript tatsächlich sagt.
Bestätigen Sie den Weg, bevor Sie bauen. Dieses Skill verpackt einen vorhandenen Talking-Head-Clip mit gestalteten Grafikkarten (Titel, Lower Thirds, Datenaufrufe, Zitate, Seitenpanels, PiP). Wenn der Benutzer einfache Captions / Untertitel wünscht (den gesprochenen Text als Schrift) →
/embedded-captions; ein einzelnes kurzes, nicht erzähltes Element (ein Logo-Sting / Lower Third) →/motion-graphics. Der Clip läuft unberührt – Nachbearbeitung von Timing, Farbe, Bildausschnitt, Reihenfolge oder Audio ist NLE-Bearbeitung und nicht Bestandteil. Aufbau aus einer URL / einem Thema / PR → die Erstellungsworkflows. Unsicher Overlays-vs-Captions? Lesen Sie/hyperframeszuerst.
Grafikverpackung-Geschwisterkind von
embedded-captions. Captions fügen die gesprochenen Wörter als lesbare Untertitel hinzu; dieses hier fügt gestaltete Grafiken auf dem abgespielten Video hinzu. Einfache Untertitel →embedded-captions. Ein Video von Grund auf neu erstellen → die Erstellungsworkflows (product-launch-video/faceless-explainer/ …).
Überprüfbare Zwischendateien im Arbeitsverzeichnis:
metadata.json— Dauer / Breite / Höhe / fpsaudio.mp3— extrahiertes Audiotranscript.json— ein flaches Wort-Array[{ text, start, end }, …](Whisper; keinsegments, keinwords-Wrapper)storyboard.json— leichtes Karten-Gerüst (der Plan des Agenten)public/cards/card-XX.html— ein HTML-Fragment pro Kartepublic/index.html— endgültige zusammengesetzte Kompositionoutput.mp4— gerendertes Video
CLI-Auflösung
# hyperframes — Transkription (lokales Whisper) + Rendern der zusammengesetzten HTML zu MP4
npx hyperframes --help
Dieses Skill läuft vollständig auf der hyperframes-CLI plus systemeigenem ffmpeg / ffprobe. Die Transkription erfolgt lokal per Whisper via hyperframes transcribe – kein Drittanbieter-Service, kein API-Key, kein ratenbegrenzter Proxy.
Arbeitsablauf
1. Umgebung prüfen
npx hyperframes doctor # ffmpeg, Headless-Browser, Render-Abhängigkeiten
# Bestätigte gebündelte Assets:
ls "<SKILL_DIR>/assets/fonts" "<SKILL_DIR>/assets/vendor/gsap.min.js"
Erforderlich:
ffmpeg/ffprobe(systemeigen)<SKILL_DIR>/assets/fonts/*.woff2,<SKILL_DIR>/assets/vendor/gsap.min.js(im Skill gebündelt, im Schritt 9 in das Arbeitsverzeichnis kopiert)
Transkription benötigt keinen Key – hyperframes transcribe führt Whisper lokal aus (Schritt 4).
Auf macOS für hyperframes render stark empfohlen:
export PRODUCER_BROWSER_GPU_MODE=hardware
2. Arbeitsverzeichnis erstellen
Alle Artefakte befinden sich unter videos/<projektname>/ – dieselbe Konvention wie bei den anderen Video-Workflows (product-launch-video / faceless-explainer / pr-to-video). Halten Sie das aktuelle Arbeitsverzeichnis auf der Workspace-Root; alles Weitere wird in dieses eine Unterverzeichnis geschrieben.
VIDEO_PATH="/absoluter/pfad/input.mp4"
WORK_DIR="videos/$(basename "$VIDEO_PATH" | sed 's/\.[^\.]*$//')"
mkdir -p "$WORK_DIR"
3. Audio und Metadaten extrahieren
# Metadaten — Dauer / Breite / Höhe / fps
ffprobe -v error -select_streams v:0 \
-show_entries stream=width,height,r_frame_rate \
-show_entries format=duration -of json "$VIDEO_PATH" > "$WORK_DIR/metadata.json"
# Audio
ffmpeg -y -i "$VIDEO_PATH" -vn -acodec libmp3lame -q:a 2 "$WORK_DIR/audio.mp3"
Ausgaben: metadata.json (lesen Sie width/height/duration; fps = der r_frame_rate-Bruch ausgewertet, z. B. 30000/1001 → 29.97) + audio.mp3.
4. Transkribieren
npx hyperframes transcribe "$WORK_DIR/audio.mp3" -d "$WORK_DIR" --json --model small.en
Lokales Whisper – kein API-Key, kein Proxy, keine Ratenbegrenzung. Schreibt ein wortgenaues transcript.json in das Arbeitsverzeichnis (Wort text + start / end-Zeitstempel). Lesen Sie dies für die Wort-/Satz-Timings, die das Karten-Timing in Schritt 6 steuern; gruppieren Sie Wörter selbst an Satzzeichen / Pausen in Sätze, wenn Sie Segment-Chunks benötigen.
Begrenzen Sie auf Mediendauer. Whisper kann das end des letzten Wortes einen Hauch über die tatsächliche Clip-Länge legen – klammern Sie jedes endSec der Karte und composition.durationSeconds auf die Dauer aus metadata.json, sonst zeigt der Render einen schwarzen Nachlauf nach dem Video.
5. Transkript korrigieren
transcript.json ist ein flaches Array von Wortobjekten – [{ "text": "...", "start": s, "end": s }, …] (kein segments-Array, kein words-Wrapper; der Schlüssel pro Wort ist text). Lesen Sie es und korrigieren Sie offensichtliche ASR-Fehler:
- Homophone, Produktnamen, technische Begriffe, Satzzeichen
- Bearbeiten Sie den
texteines Wortes direkt; behalten Sie seinestart/end-Zeitstempel - Es gibt kein vorab gruppiertes
segments-Array – gruppieren Sie Wörter selbst in Sätze (teilen Sie an Terminal-Satzzeichen / Pausen), wenn Sie Segment-Chunks für das Karten-Timing benötigen
6. Ein leichtes Storyboard entwerfen (im Chat)
Kein CLI beteiligt. Lesen Sie transcript.json + metadata.json und entwerfen Sie Karten direkt. storyboard.json ist ein agenteninternes Planungsartefakt – es wird von keinem CLI-Befehl konsumiert; es existiert, damit Sie klar über Timing und Inhalt nachdenken können, bevor Sie den HTML-Code jeder Karte schreiben. Halten Sie die Form konsistent mit dem untenstehenden Beispiel, sodass dasselbe Gerüst die Komposition antreiben kann, die Sie in Schritt 9 erstellen:
{
"schemaVersion": 3,
"composition": {
"fps": 30,
"width": 1080,
"height": 1920,
"durationSeconds": 121.2,
"layout": "portrait",
"themeId": "noir",
"seed": 42
},
"videoTrack": {
"sourcePath": "input-video.mp4",
"startSec": 0,
"endSec": 121.2,
"bounds": { "x": 0, "y": 0, "width": 1080, "height": 1920 }
},
"subtitles": { "enabled": false },
"cards": [
{
"id": "card-01",
"intent": "Hook mit der ängstlichen Mitternachtsfrage des Sprechers",
"startSec": 0.5,
"endSec": 13.0,
"accentIndex": 0,
"zone": "fullscreen",
"contentHints": {
"kicker": "EINE EHRLICHE FRAGE",
"title": "Die seelenforschende Frage um 23 Uhr",
"detail": "60-Sekunden-Sprachnachricht des Kunden: 'Wenn der RMB aufwertet, heißt das, dass meine USD-Police ein schrecklicher Verlust ist?'"
}
}
]
}
Erforderliche Kartenfelder:
| Feld | Typ | Zweck |
|---|---|---|
id | string | Stabile ID, in Karten-HTML & GSAP-Selektoren verwendet |
intent | string | Natürlichsprachliche Beschreibung; an die Kartensynthese übergeben |
startSec / endSec | number | Zeit in Sekunden (endSec > startSec) |
accentIndex | 0 | 1 | 2 | 3 | 4 | Welche der 5 Themen-Akzentfarben diese Karte verwendet |
zone | Enum (siehe unten) | Wo auf der Leinwand die Karte lebt |
contentHints | object | Freiform-Beutel; Agent setzt hier kicker/title/detail/data/quote |
archetype (optional) | string | Freiform-Label, um sich an ein Kartenmuster zu erinnern; fehlend = freie Form, was der Standard ist |
transition (optional) | Enum: cut | fade | slide | wipe | Deklarativer Karten-zu-Karten-Übergang |
Fünf zone-Werte:
| zone | aufgelöste Grenzen | wann verwenden |
|---|---|---|
fullscreen | deckt die ganze Leinwand ab | Heldenmomente, große Zahlen, Mantras |
whiteboard-area | 40px-Rand eingefügt (oder 45% der Hochkant-Höhe) | dichte Daten / kommentierter Inhalt |
lower-third | untere 30%-Bande | Anmerkung über sichtbarem Video |
side-panel | rechte 42% (Querformat) oder untere 40% (Hochformat) | Datenseite, Video andere Seite |
video-overlay | volle Leinwand, erwartet weitgehend transparente Karte | Anmerkungs-Overlays auf randlosem Video |
Wenn Sie die Komposition in Schritt 9 zusammenbauen, lösen Sie die zone jeder Karte in Pixelgrenzen auf dem Kartenhost-Wrapper gemäß der obigen Tabelle auf. Videogrenzen werden einmal auf Kompositionsebene gesetzt (videoTrack.bounds); um das Video zwischen Karten „bewegen“ zu lassen, erstellen Sie GSAP-Tweens gegen #video-wrap im <script> der Komposition (siehe Schritt 9).
Keine vorgeschriebenen Kartenrollen, kein vorgeschriebener narrativer Bogen. Karten entstehen aus dem, was das Video tatsächlich sagt – könnten ganz Zitate oder ganz Daten sein, könnten mit einer Zahl oder einer Geschichte beginnen. Lassen Sie das Transkript den Rhythmus bestimmen.
Wie viele Take-Aways? – automatisch aus Dauer + Dichte ableiten. Keine feste Obergrenze. Wählen Sie ein Basis-Tempo aus der Videodauer, passen Sie es dann an die Informationsdichte an. Nur die Untergrenze ist fest: mindestens 5 Karten, damit auch kurze Videos Rhythmus haben.
Schritt 1 – Basis-Tempo nach Dauer (das natürliche sec/Karte für mittlere Dichte):
| Videodauer | Basis-Tempo (sec pro Karte) | Begründung |
|---|---|---|
| < 60s (kurzes Reel) | 6–8s | Zuschauer erwarten schnelle Schnitte in Kurzform |
| 60s – 3 min | 8–12s | normales Social-Media-Tempo |
| 3 – 10 min | 12–20s | Luft zum Atmen geben; jede Karte trägt mehr |
| 10 – 30 min | 20–35s | Langform-Vortrags-/Interview-Rhythmus |
| > 30 min | 30–60s | episodisch, fast kapitelartig |
Schritt 2 – Dichtemultiplikator (multipliziert das Basis-Tempo):
| Signal im Transkript | Multiplikator | Wirkung |
|---|---|---|
| Hohe Dichte – viele Zahlen, unterschiedliche Behauptungen, stakkatoartiges Tempo, aufzählungsartige Aufzählung, jeder 1–2 Sätze ist eine neue Idee | × 0.7 | schneidet schneller, mehr Karten |
| Mittlere Dichte – gemischter Fluss mit sowohl Daten als auch Erzählung | × 1.0 | Basis-Tempo |
| Niedrige Dichte – eine ausgedehnte Geschichte, wiederholtes Umdeuten, langsames reflektierendes Tempo, einzelnes sich entfallendes Argument | × 1.5 | schneidet langsamer, weniger Karten |
Schritt 3 – Berechnen:
secPerCard = basisTempo × dichteMultiplikator
cardCount = max(5, round(videoDauerSek / secPerCard))
Beispiele (beachten Sie – keine obere Klammer; lange Videos produzieren natürlich mehr Karten):
- 30s Reel, einzelner Punchline (niedrige Dichte) → 7 × 1.5 = 10.5s/Karte → round(30/10.5)=3 → auf 5 Karten abgerundet
- 60s reflektierender Monolog (niedrige Dichte) → 10 × 1.5 = 15s/Karte → 4 → auf 5 Karten abgerundet
- 121s Talking-Head mit reichen Daten (hohe Dichte) → 10 × 0.7 = 7s/Karte → 17 Karten
- 5 Min Interview, gemischte Dichte → 16 × 1.0 = 16s/Karte → 19 Karten
- 10 Min Deep-Dive, hohe Dichte → 16 × 0.7 = 11s/Karte → 55 Karten
- 30 Min Vortrag, mittlere Dichte → 28 × 1.0 = 28s/Karte → 64 Karten
- 1 Std Podcast, niedrige Dichte → 45 × 1.5 = 67.5s/Karte → 53 Karten
Wenn eine Karte länger als ~15s hält, planen Sie eine reichhaltigere Karte (Datenblock, mehrstufige Enthüllung, mehrere Unterpunkte, die sich mit gestaffelten Animationen entfalten) – ein statischer Einzeiler wird nach 8s langweilig. Überlegen Sie bei langen Stücken, in denen viele Karten 30s überschreiten, die Zeitleiste in Unterkompositionen aufzuteilen (eine .html pro Kapitel, mit data-composition-src eingehängt), sodass die GSAP-Zeitleiste pro Datei handhabbar bleibt – siehe die timeline_track_too_dense-Warnung von HyperFrames.
content kann ein einfacher String ("Title: annualized 5.69%\nNotes: ...") oder eine beliebige JSON-Form sein, die die Daten erfasst. Der Agent entscheidet über die Form pro Karte.
Optionaler Abspann. Dieses Skill liefert keinen festen Marken-Abspann. Wenn der Benutzer eine Schlusskarte wünscht, entwerfen Sie selbst eine neutrale (Wortmarke + einzeiliger Slogan, ~1.5-2s, einblenden -> kurze Haltezeit -> ausblenden), hängen Sie sie an cards[] an und verlängern Sie composition.durationSeconds bis zu ihrem endSec. Andernfalls enden Sie mit der letzten Inhaltskarte.
7. Rendering-Strategie festlegen
Visuelle Richtung mit dem Benutzer bestätigen (TUN SIE DAS ZUERST)
Bevor Sie mit dem Entwerfen von Karten oder der Festlegung von Grenzen beginnen, fragen Sie den Benutzer nach dem Ausgabeverhältnis, dem Layout, dem Stil und der Kartendichte-Voreinstellung. Frames werden automatisch aus der gewählten Layout × Stil-Kombination ausgewählt (siehe Tabelle „Auto-Pick-Frame" unten). Bevor Sie die Frage senden, berechnen Sie zwei Dinge vor:
recommendedRatiofro…
…[abgeschnitten für die Übersetzung]