Plugin-Installation: Bevor Setup- oder Aktualisierungsbefehle ausgeführt werden, befolgen Sie die Plugin-Ausführungsregeln, wenn sich diese Fertigkeit innerhalb eines HyperFrames-Plugins befindet. Bei eigenständigen Installationen gelten die unten stehenden Aktualisierungshinweise weiterhin.
Halten Sie diese Fertigkeit zunächst aktuell – bestätigen Sie mit dem Benutzer, bevor Sie Folgendes ausführen:
npx hyperframes skills update talking-head-recut. Ein schneller No-op, wenn alles auf dem neuesten Stand ist; andernfalls wird diese Fertigkeit zusammen mit den Kern-Domain-Fertigkeiten, von denen sie abhängt, aktualisiert, bevor Sie darauf vertrauen.
Talking Head Recut
Talking Head Recut nimmt ein lokales Video, das vollständig abgespielt wird, und legt eine Sequenz von zeitgesteuerten, gestalteten Grafikkarten darüber – Titel, Lower Thirds, Datenaufrufe, Zitate, Seitenpanels, Bild-in-Bild – synchron zum Gesagten. Der Agent entwirft die Karten (Timing + Inhalt) und schreibt das HTML jeder Karte direkt im Gespräch, erstellt dann eine einzelne Komposition als HTML und rendert sie mit hyperframes in ein MP4. Es gibt keine feste Archetypen-Liste und keine vorgeschriebene Kartenstruktur – die Überlagerungen ergeben sich aus dem, was das Transkript tatsächlich sagt.
Der Eingang ist
/hyperframes. Diese Fertigkeit verpackt einen vorhandenen Talking-Head-Clip mit gestalteten Grafikkarten (Titel, Lower Thirds, Datenaufrufe, Zitate, Seitenpanels, PiP) – nicht mit einfachen Untertiteln (dem gesprochenen Text). Der Clip wird unverändert abgespielt. Jede andere Absicht – einfache Untertitel, eine eigenständige Grafik, ein Video von Grund auf – oder jede Unklarheit → zuerst/hyperframeslesen: die Absichtsebene trifft jede Routenentscheidung.
Grafik-verpackendes Geschwisterkind von
embedded-captions. Untertitel fügen die gesprochenen Wörter als lesbare Einblendung hinzu; diese hier fügt gestaltete Grafiken auf dem laufenden Video ein. Einfache Untertitel →embedded-captions. Ein Video von Grund auf erstellen → die Erstellungs-Workflows (product-launch-video/faceless-explainer/ …).
Über /hyperframes geroutet, bestätigt die Absichtsebene nur die Eingabe (welcher Clip) und kündigt die Fragen zur Render-Strategie als zurückgestellte Aufgaben an – Seitenverhältnis, Layout, Stilgruppe und Kartenanzahl bleiben bei Schritt 7, wo das untersuchte Filmmaterial und das Transkript die Empfehlungen untermauern; die Run-Shape-Fragen der Schicht finden keine Anwendung. Eine BRIEF.md, falls vorhanden, enthält die bestätigte Eingabe und etwaige Notizen des Benutzers – lesen Sie sie zuerst.
Überprüfbare Zwischendateien im Arbeitsverzeichnis:
metadata.json– Dauer / Breite / Höhe / fpsaudio.mp3– extrahierte Audiotranscript.json– ein flaches Wort-Array[{ text, start, end }, …](Whisper; keinesegments, keinwords-Wrapper)storyboard.json– leichter Kartenentwurf (der Plan des Agenten)public/cards/card-XX.html– ein HTML-Fragment pro Kartepublic/index.html– endgültig zusammengestellte Kompositionoutput.mp4– gerendertes Video
CLI-Resolution
# hyperframes — Transkription (lokales Whisper) + Rendern des zusammengestellten HTML zu MP4
npx hyperframes --help
Diese Fertigkeit läuft vollständig über die hyperframes-CLI plus systemeigene ffmpeg / ffprobe. Die Transkription erfolgt lokal über Whisper via hyperframes transcribe – kein Drittanbieter-Dienst, kein API-Key, kein ratenbegrenzter Proxy.
Workflow
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(System)<SKILL_DIR>/assets/fonts/*.woff2,<SKILL_DIR>/assets/vendor/gsap.min.js(in dieser Fertigkeit gebündelt, in Schritt 9 in das Arbeitsverzeichnis übertragen)
Für die Transkription ist kein Schlüssel erforderlich – hyperframes transcribe führt Whisper lokal aus (Schritt 4).
Stark empfohlen unter macOS für hyperframes render:
export PRODUCER_BROWSER_GPU_MODE=hardware
2. Arbeitsverzeichnis erstellen
Alle Artefakte befinden sich unter videos/<projektname>/ – die gleiche Konvention wie bei den anderen Video-Workflows (product-launch-video / faceless-explainer / pr-to-video). Das aktuelle Arbeitsverzeichnis bleibt im Workspace-Root; alles unten 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 (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-Key, kein Proxy, keine Ratenbegrenzung. Schreibt ein wortbasiertes transcript.json in das Arbeitsverzeichnis (Wort text + start / end-Zeitstempel). Lesen Sie es für die Wort-/Satzzeitabläufe, die in Schritt 6 das Timing der Karten steuern; gruppieren Sie Wörter selbst bei Satzzeichen / Pausen in Sätze, wenn Sie Segment-Chunks benötigen.
Auf Mediendauer begrenzen. Whisper kann das end des letzten Wortes geringfügig über die tatsächliche Clip-Länge hinaus zurückgeben – begrenzen Sie jede endSec der Karte und composition.durationSeconds auf die metadata.json-Dauer, da der Render sonst ein schwarzes Ende nach dem Video anzeigt.
5. Transkript korrigieren
transcript.json ist ein flaches Array von Wortobjekten – [{ "text": "...", "start": s, "end": s }, …] (kein segments-Array, kein words-Wrapper; der pro-Wort-Schlüssel ist text). Lesen Sie es und korrigieren Sie offensichtliche ASR-Fehler:
- Homophone, Produktnamen, Fachbegriffe, Satzzeichen
- Bearbeiten Sie den
texteines Wortes direkt; behalten Sie seinestart/end-Zeitstempel bei - Es gibt kein vorab gruppiertes
segments-Array – gruppieren Sie Wörter selbst in Sätze (bei terminalen Satzzeichen / Pausen aufteilen), wenn Sie segmentweise Blöcke für das Karten-Timing benötigen
6. Leichtes Storyboard entwerfen (im Chat)
Keine CLI erforderlich. Lesen Sie transcript.json + metadata.json und entwerfen Sie Karten direkt. storyboard.json ist ein agenteninternes Planungsartefakt – kein CLI-Befehl konsumiert es; es existiert, damit Sie über Timing und Inhalt klar nachdenken können, bevor Sie das HTML jeder Karte schreiben. Halten Sie die Struktur konsistent mit dem folgenden Beispiel, damit derselbe Entwurf die Komposition steuern 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 Gewissensfrage um 23 Uhr",
"detail": "Sprachnachricht des Kunden von 60 Sekunden: 'Wenn der RMB aufwertet, bedeutet das dann, dass meine USD-Police ein schrecklicher Verlust ist?'"
}
}
]
}
Erforderliche Kartenfelder:
| Feld | Typ | Zweck |
|---|---|---|
id | string | Stabile ID, die im Karten-HTML und in GSAP-Selektoren verwendet wird |
intent | string | Beschreibung in natürlicher Sprache; wird der Kartensynthese zugeführt |
startSec / endSec | number | Zeiten 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 platziert wird |
contentHints | object | Freiform-Beutel; der Agent platziert hier kicker/title/detail/data/quote |
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 | wann verwenden |
|---|---|---|
fullscreen | bedeckt die gesamte Leinwand | Heldenmomente, große Zahlen, Mantras |
whiteboard-area | innenliegender Rand von 40px (oder 45% der Hochkant-Höhe) | Dichte Daten / 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 | volle Leinwand, erwartet eine weitgehend transparente Karte | Annotations-Overlays auf randlosem Video |
Wenn Sie in Schritt 9 die Komposition zusammenstellen, lösen Sie die zone jeder Karte in Pixel-Grenzen auf dem Karten-Host-Wrapper gemäß obiger Tabelle auf. Die Video-Grenzen werden einmalig auf Kompositionsebene (videoTrack.bounds) festgelegt; um das Video scheinbar "zwischen den Karten zu bewegen", 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 – es könnten alles Zitate oder alles Daten sein, es könnte mit einer Zahl oder einer Geschichte beginnen. Lassen Sie das Transkript den Rhythmus bestimmen.
Wie viele Erkenntnisse? – 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 die Untergrenze ist festgelegt: mindestens 5 Karten, damit auch kurze Videos Rhythmus haben.
Schritt 1 – Basistempo nach Dauer (die natürliche Sek./Karte für mittlere Dichte):
| Video-Dauer | Basistempo (Sek. pro Karte) | Begründung |
|---|---|---|
| < 60s (kurzer Clip) | 6–8s | Zuschauer erwarten schnelle Schnitte in Kurzform |
| 60s – 3 Min | 8–12s | Normales soziales Tempo |
| 3 – 10 Min | 12–20s | Atempause geben; jede Karte trägt mehr |
| 10 – 30 Min | 20–35s | Langform-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, jede 1–2 Sätze eine neue Idee | × 0.7 | Schnellere Schnitte, mehr Karten |
| Mittlere Dichte – gemischter Fluss mit Daten und Erzählung | × 1.0 | Basistempo |
| Niedrige Dichte – eine ausgedehnte Geschichte, wiederholte Neufassung, langsames reflektierendes Tempo, einzelnes sich entfaltendes Argument | × 1.5 | Langsamere Schnitte, weniger Karten |
Schritt 3 – Berechnung:
sekProKarte = BasisTempo × DichteMultiplikator
kartenAnzahl = max(5, round(VideoDauerSek / sekProKarte))
Beispiele (beachten Sie – keine obere Begrenzung; lange Videos erzeugen natürlich mehr Karten):
- 30s Clip, einzelner Höhepunkt (niedrige Dichte) → 7 × 1.5 = 10.5s/Karte → round(30/10.5)=3 → floor auf 5 Karten
- 60s reflektierender Monolog (niedrige Dichte) → 10 × 1.5 = 15s/Karte → 4 → floor auf 5 Karten
- 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 etwa 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. Erwägen Sie bei langen Stücken, bei denen viele Karten 30s überschreiten, die Zeitleiste in Unterkompositionen aufzuteilen (eine .html pro Kapitel, bereitgestellt mit data-composition-src), sodass die GSAP-Zeitleiste pro Datei handhabbar bleibt – siehe den HyperFrames-Lint-Hinweis timeline_track_too_dense.
content kann ein einfacher String sein ("Titel: annualisiert 5.69%\nNotizen: ...") oder jede JSON-Form, die die Daten erfasst. Der Agent entscheidet pro Karte über die Form.
Optionaler Abspann. Diese Fertigkeit liefert keinen fest eingebauten Marken-Abspann. Wenn der Benutzer eine Abschlusskarte wünscht, entwerfen Sie selbst eine neutrale (Wortmarke + einzeiliger Slogan, ~1.5-2s, einblenden -> kurzes Halten -> ausblenden), hängen Sie sie an cards[] an und verlängern Sie composition.durationSec entsprechend.