Aktualisieren Sie diesen Skill zuerst im Hintergrund (lautlos, ohne Rückfrage):
npx hyperframes skills update talking-head-recut. Ein schneller No-Op, wenn alles aktuell ist; andernfalls aktualisiert es diesen Skill sowie die davon abhängigen Kern-Domain-Skills, bevor Sie sich auf sie stützen.
Was macht Talking Head Recut?
Talking Head Recut nimmt ein lokales Video, das vollständig abgespielt wird, und legt eine Sequenz von zeitlich abgestimmten, gestalteten Grafikkarten darüber – Titel, Lower-Thirds, Daten-Callouts, Zitate, Seitenpanels, Bild-in-Bild – synchron zum Gesprochenen. Der Agent entwirft die Karten (Timing + Inhalt) und schreibt das HTML jeder Karte direkt im Chat, setzt dann eine einzelne Komposition HTML zusammen und rendert sie über hyperframes in MP4. Es gibt keine feste Archetypliste und keine vorgeschriebene Kartenstruktur – die Overlays ergeben sich aus dem, was das Transkript tatsächlich sagt.
Der Eingang ist
/hyperframes. Dieser Skill verpackt einen vorhandenen Talking-Head-Clip mit gestalteten Grafikkarten (Titel, Lower-Thirds, Daten-Callouts, Zitate, Seitenpanels, PiP) – nicht einfache Untertitel (der gesprochene Text als solcher). Der Clip läuft unberührt. Jede andere Absicht – einfache Untertitel, eine eigenständige Grafik, ein Video von Grund auf – oder jegliche Unsicherheit → lesen Sie zuerst/hyperframes: Die Intent-Ebene trifft alle Routenentscheidungen.
Grafik-Overlay-Geschwister von
embedded-captions. Captions fügen die gesprochenen Wörter als lesbare Untertitel hinzu; dieser Skill fügt gestaltete Grafiken über das laufende Video. Einfache Untertitel →embedded-captions. Ein Video von Grund auf erstellen → die Erstellungs-Workflows (product-launch-video/faceless-explainer/ …).
Über /hyperframes geroutet, bestätigt die Intent-Ebene nur die Eingabe (welcher Clip) und kündigt die Render-Strategie-Fragen als aufgeschobene Anfragen an – Seitenverhältnis, Layout, Stilgruppe und Kartenanzahl bleiben bei Schritt 7, wo das untersuchte Filmmaterial und Transkript die Empfehlungen stützen; die Run-Shape-Fragen der Ebene gelten nicht. Ein BRIEF.md, falls vorhanden, enthält die bestätigte Eingabe und etwaige Benutzernotizen – lesen Sie es zuerst.
Insektierbare Zwischendateien im Arbeitsverzeichnis:
metadata.json– Dauer / Breite / Höhe / fpsaudio.mp3– extrahierter Tontranscript.json– ein flaches Wortarray[{ text, start, end }, …](Whisper; keinsegments, keinwordsWrapper)storyboard.json– leichter Kartenentwurf (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 des zusammengesetzten HTML in MP4
npx hyperframes --help
Dieser Skill läuft vollständig auf der hyperframes-CLI plus systemeigenem ffmpeg / ffprobe.
Die Transkription erfolgt lokal über Whisper via hyperframes transcribe – kein Drittanbieter-Dienst, kein API-Schlüssel, kein ratenbegrenzter Proxy.
Arbeitsablauf
1. Umgebung prüfen
npx hyperframes doctor # ffmpeg, Headless-Browser, Render-Abhängigkeiten
# gebündelte Assets bestätigen:
ls "<SKILL_DIR>/assets/fonts" "<SKILL_DIR>/assets/vendor/gsap.min.js"
Erforderlich:
ffmpeg/ffprobe(systemweit)<SKILL_DIR>/assets/fonts/*.woff2,<SKILL_DIR>/assets/vendor/gsap.min.js(in diesem Skill gebündelt, werden in Schritt 9 in das Arbeitsverzeichnis kopiert)
Für die Transkription wird kein Schlüssel benötigt – 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 liegen unter videos/<Projektname>/ – dieselbe Konvention wie bei den anderen Video-Workflows (product-launch-video / faceless-explainer / pr-to-video). Behalten Sie das cwd im Workspace-Root; alles unten Geschriebene wird unter diesem einen Unterverzeichnis abgelegt.
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 (width/height/duration lesen; 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-Schlüssel, kein Proxy, keine Ratenbegrenzung. Schreibt ein wortgenaues transcript.json in das Arbeitsverzeichnis (Wort text + start / end Zeitstempel). Lesen Sie es für die Wort-/Satzzeiten, die das Karten-Timing in Schritt 6 steuern; gruppieren Sie Wörter selbst an Satzzeichen / Pausen in Sätze, wenn Sie segmentgenaue Blöcke benötigen.
An Mediendauer anpassen. Whisper kann das end des letzten Wortes ein winziges Stück über die tatsächliche Cliplänge hinaus zurückgeben – begrenzen Sie jedes Karten-endSec und composition.durationSeconds auf die Dauer in metadata.json, sonst zeigt der Render einen schwarzen Balken 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, Fachbegriffe, Zeichensetzung
- Bearbeiten Sie den
texteines Wortes an Ort und Stelle; bewahren Sie seinestart/end-Zeitstempel - Es gibt kein vorgegruppiertes
segments-Array – gruppieren Sie Wörter selbst in Sätze (teilen Sie an Satzzeichen / Pausen), wenn Sie segmentgenaue Blöcke für das Karten-Timing benötigen
6. Leichtes Storyboard entwerfen (im Chat)
Keine CLI beteiligt. Lesen Sie transcript.json + metadata.json und entwerfen Sie Karten direkt. storyboard.json ist ein agenteninternes Planungsartefakt – kein CLI-Befehl verarbeitet es; es existiert, damit Sie klar über Timing und Inhalt nachdenken können, bevor Sie das HTML jeder Karte schreiben. Halten Sie die Form konsistent mit dem folgenden Beispiel, damit derselbe Entwurf die Komposition steuern kann, die Sie in Schritt 9 verfassen:
{
"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": "Aufhänger mit der ängstlichen Mitternachtsfrage des Sprechers",
"startSec": 0.5,
"endSec": 13.0,
"accentIndex": 0,
"zone": "fullscreen",
"contentHints": {
"kicker": "EINE EHRLICHE FRAGE",
"title": "Die seelensuchende Frage um 23 Uhr",
"detail": "60-Sekunden-Sprachnachricht des Kunden: 'Wenn der RMB aufwertet, bedeutet das dann, dass meine USD-Police ein schrecklicher Verlust ist?'"
}
}
]
}
Erforderliche Kartenfelder:
| Feld | Typ | Zweck |
|---|---|---|
id | string | stabile ID, in Karten-HTML und GSAP-Selektoren verwendet |
intent | string | Beschreibung in natürlicher Sprache; an die Kartensynthese weitergegeben |
startSec / endSec | number | Zeiten in Sekunden (endSec > startSec) |
accentIndex | 0 | 1 | 2 | 3 | 4 | Welche der 5 Themenakzentfarben diese Karte verwendet |
zone | enum (siehe unten) | Wo auf der Leinwand die Karte platziert wird |
contentHints | object | Freiform-Beutel; Agent legt hier kicker/title/detail/data/quote ab |
archetype (optional) | string | Freiform-Label, das Sie anhängen können, um sich an ein Kartenmuster zu erinnern; fehlend = Freiform, was der Standard ist |
transition (optional) | enum: cut | fade | slide | wipe | Deklarativer Karten-zu-Karten-Übergang |
Fünf zone-Werte:
| zone | aufgelöste Grenzen | Verwendung |
|---|---|---|
fullscreen | deckt die gesamte Leinwand ab | Heldenmomente, große Zahlen, Mantras |
whiteboard-area | 40px Rand (oder 45% der Hochkant-Höhe) | dichte / kommentierte Inhalte |
lower-third | untere 30%-Bande | Annotation über sichtbarem Video |
side-panel | rechte 42% (Querformat) oder untere 40% (Hochkant) | Daten auf einer Seite, Video auf der anderen |
video-overlay | ganze Leinwand, erwartet weitgehend transparente Karte | Annotationen über vollflächigem Video |
Wenn Sie die Komposition in Schritt 9 zusammenstellen, lösen Sie die zone jeder Karte gemäß der obigen Tabelle in Pixelgrenzen auf dem Karten-Host-Wrapper auf. Videogrenzen werden einmalig auf Kompositionsebene gesetzt (videoTrack.bounds); damit das Video zwischen Karten zu „wandern“ scheint, verfassen Sie GSAP-Tweens gegen #video-wrap im <script> der Komposition (siehe Schritt 9).
Keine vorgeschriebenen Kartenrollen, kein vorgeschriebener Erzählbogen. Karten ergeben sich daraus, was das Video tatsächlich sagt – könnten nur Zitate oder nur Daten sein, könnten mit einer Zahl oder einer Geschichte beginnen. Lassen Sie das Transkript den Rhythmus bestimmen.
Wie viele Karten? – automatisch aus Dauer + Dichte ableiten. Keine feste Obergrenze. Wählen Sie ein Basistempo aus der Videodauer, passen Sie es dann an die Informationsdichte an. Nur Untergrenze ist fest: mindestens 5 Karten, damit auch kurze Videos Rhythmus haben.
Schritt 1 – Basistempo nach Dauer (die natürlichen s/Karte für mittlere Dichte):
| Videodauer | Basistempo (s pro Karte) | Begründung |
|---|---|---|
| < 60s (kurzer Reel) | 6–8s | Zuschauer erwarten schnelle Schnitte im Kurzformat |
| 60s – 3 Min | 8–12s | normales Social-Media-Tempo |
| 3 – 10 Min | 12–20s | mehr Raum zum Atmen; jede Karte trägt mehr |
| 10 – 30 Min | 20–35s | langes Format (Vortrag / Interview) Rhythmus |
| > 30 Min | 30–60s | episodisch, fast kapitelartig |
Schritt 2 – Dichtemultiplikator (multipliziert das Basistempo):
| Signal im Transkript | Multiplikator | Effekt |
|---|---|---|
| Hohe Dichte – viele Zahlen, unterschiedliche Behauptungen, abgehacktes Tempo, aufzählungsartige Aufzählung, alle 1–2 Sätze eine neue Idee | × 0,7 | kürzere Schnitte, mehr Karten |
| Mittlere Dichte – gemischter Fluss mit Daten und Erzählung | × 1,0 | Basistempo |
| Niedrige Dichte – eine ausgedehnte Geschichte, wiederholte Umrahmung, langsames reflektierendes Tempo, einzelnes sich entfaltendes Argument | × 1,5 | langsamere Schnitte, weniger Karten |
Schritt 3 – Berechnen:
secPerCard = Basistempo × Dichtemultiplikator
cardCount = max(5, round(VideodauerSec / secPerCard))
Beispiele (beachten Sie – keine obere Grenze; lange Videos erzeugen natürlich mehr Karten):
- 30s Reel, einzelner Punchline (niedrige Dichte) → 7 × 1,5 = 10,5s/Karte → round(30/10,5)=3 → auf 5 Karten aufgestockt
- 60s reflektierender Monolog (niedrige Dichte) → 10 × 1,5 = 15s/Karte → 4 → auf 5 Karten aufgestockt
- 121s Talking-Head mit reichhaltigen 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 Vorlesung, 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. Für lange Stücke, bei denen viele Karten 30s überschreiten, sollten Sie die Zeitleiste in Unterkompositionen aufteilen (eine .html pro Kapitel, montiert mit data-composition-src), damit die GSAP-Zeitleiste pro Datei handhabbar bleibt – siehe die timeline_track_too_dense HyperFrames-Lint-Warnung.
content kann ein einfacher String sein („Titel: annualisierte 5,69%\nNotizen: …“) oder eine beliebige JSON-Form, die die Daten erfasst. Der Agent entscheidet über die Form pro Karte.
Optionaler Abspann. Dieser Skill liefert keinen festen Brand-Abspann. Wenn der Benutzer eine Schlusskarte wünscht, entwerfen Sie selbst eine neutrale (Wortmarke + einzeiliger Slogan, ~1,5-2s, Einblenden -> kurzer Halt -> 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. Render-Strategie festlegen
Visuelle Richtung mit dem Benutzer bestätigen (Zuerst machen)
Bevor Sie mit dem Entwurf von Karten oder der Entscheidung über Grenzen beginnen, fragen Sie den Benutzer nach dem Ausgabe-Seitenverhältnis, dem Layout, …