HyperFrames — Start hier

Was macht HyperFrames — Start hier?

HyperFrames rendert Video aus HTML — eine Komposition ist eine HTML-Datei, deren DOM die Zeitsteuerung mit data-*-Attributen deklariert, deren Animationslaufzeit suchbar ist und deren Medienwiedergabe vom Framework gesteuert wird.

Diese Fertigkeit ist die technische Anleitung — sie ist bewusst nicht gestalterisch. Für Bewegungs-/Animationsrezepte siehe /hyperframes-motion. Für Designrichtlinien (Paletten, Typografie, Rahmenvorgaben) siehe /hyperframes-design. Unten: eine Capability Map aller HyperFrames-Themen, ein Themenhandbuch-Index mit dem Inhalt dieser Fertigkeit und ein Intent-Router zur Auswahl eines Workflows.

Capability Map — die HyperFrames-Fertigkeiten

Drei Fertigkeiten, eine pro Aufgabenbereich. Diese ist die technische Anleitung. Die anderen beiden behandeln das Design.

Du möchtest...	Fertigkeit
HyperFrames verwenden — Kompositionsvertrag, CLI-Entwicklungszyklus, Registry-Blöcke/-Komponenten installieren (diese Fertigkeit)	/hyperframes
Bewegung/Animation — atomare Bewegungsregeln, Szenenbaupläne, Übergänge, Laufzeitadapter (GSAP / Lottie / Three.js)	/hyperframes-motion
Design — Paletten, Typografie, Rahmenvorgaben, Taktplanung, Marken-/Stilentscheidungen (keine Animationsrezepte)	/hyperframes-design

---

Themenhandbuch — was in dieser Fertigkeit steckt

Die technische Anleitung ist in drei Unterthemen aufgeteilt. Jedes hat seine eigene SKILL.md und references/:

Unterthema	Pfad	Lies es für
Kompositionskern	core/SKILL.md	Der Kompositionsvertrag — data-*-Attribute, Clips, Tracks, Unterkompositionen, Variablen, Determinismusregeln
CLI-Entwicklungszyklus	cli/SKILL.md	npx hyperframes init / lint / validate / inspect / preview / render + AWS Lambda Cloud-Rendering
Registry-Ergänzung	registry/SKILL.md	hyperframes add <block-or-component> — Installationsorte, Blöcke verdrahten, Komponenten verdrahten, neue Elemente beitragen

Details pro Thema befinden sich im jeweiligen Unterthemen-Ordner references/. Für spezifische Animationslaufzeiten (GSAP-API, Lottie, Three.js usw.) siehe /hyperframes-motion → adapters/<runtime>.md.

---

Intent-Routing — einen Workflow auswählen

Dieser Abschnitt kennt nur die übergeordneten Workflows; er lädt weder deren interne Referenzen noch die obigen Themenhandbücher.

Vor dem Routing — bestätige die Eingabe, nicht die Spezifikation

Das Routing muss wissen, worum es in dem Video geht — seine Eingabe und sein Thema. Wenn dies nicht angegeben ist („Erstelle ein Video über unser Ding“ ohne URL, Produkt, Thema oder Asset), frage nach, bevor du einen Workflow betrittst — die Festlegung auf einen Workflow IST die Routing-Entscheidung. Höchstens zwei Fragen:

• Eingabe — ein Produkt (URL / Briefing), eine allgemeine Website, ein GitHub-PR, ein zu erklärendes Thema oder ein vorhandenes Talking-Head-Video?

Standardwerte der Spezifikation — benenne, frage nicht (sie ändern nie die Route): Seitenverhältnis 16:9 (verwende 9:16 nur für ein benanntes vertikales Ziel — TikTok / Reels / Shorts); Sprache der Untertitel = die des Benutzers. Der gewählte Workflow bestätigt seine eigenen Spezifikationen im ersten Schritt.

Workflow-Spickzettel

Workflow	Verwende es für
/faceless-explainer	Erklären eines Themas/Konzepts aus Text — kein Produkt, keine URL; jedes Bild wird vom LLM erfunden
/pr-to-video	Ein GitHub-PR / eine Codeänderung → Änderungsprotokoll / Feature-Enthüllung / Fehlerbehebung / Refactoring-Erklärvideo
/embedded-captions	Hinzufügen von Untertiteln zu einem vorhandenen Talking-Head-Video (Filmmaterial bleibt unberührt)
/talking-head-recut	Aufbereitung eines vorhandenen Talking-Head-Videos mit designten grafischen Overlays — untere Drittel, Datenaufrufe, kinetische Titel, Pull-Quote
/motion-graphics	Eine kurze, designgeführte Bewegungsgrafik — kinetische Typografie, eine Statistik / ein Diagramm-Treffer, ein Logo-Sting, ein Overlay im unteren Drittel
/slideshow	Eine Präsentation / Pitch-Deck / interaktives Deck — diskrete Folien, Fragmente, Verzweigungen, Hotspots; Ausgabe ist ein navigierbares Deck, kein gerendertes Video
/general-video	Alles andere — längere oder mehrszenige Stücke, eine statische Schleife / ein Poster, eine benutzerdefinierte Komposition

Disambiguierung (nur wo verwechselbar):

• Bewegungsorientiert (unter ~10s, die Bewegung ist die Botschaft) → /motion-graphics, unabhängig von der Eingabe.
• Eine URL oder ein Skript — ein GitHub-PR-Link → /pr-to-video; erklärt ein Konzept ohne Produkt / Website → /faceless-explainer. Bei wirklich unklarer Eingabe → eine Frage stellen.
• Vorhandenes Filmmaterial — einfache gesprochene Untertitel → /embedded-captions; designte Overlay-Karten → /talking-head-recut. Keines bearbeitet das Filmmaterial selbst (Neuschnitt / Neufärbung / Neuausrichtung / Neuanordnung ist NLE-Bearbeitung — außerhalb des Rahmens).
• Eine Präsentation / Pitch-Deck / interaktives Deck (diskrete Folien, Navigation, Präsentatormodus) → /slideshow — Ausgabe ist ein navigierbares Deck, kein gerendertes Video. Eine explizite „Slideshow“-Anfrage wird direkt ausgeführt; ein angrenzender Auslöser („Deck / Folien / Präsentation / konvertiere diese Seite“) lässt /slideshow bestätigen, dass es sich um eine Slideshow handelt, bevor es erstellt wird, und wechselt bei Bedarf zum entsprechenden Nicht-Slideshow-Workflow.
• Die Länge ist ein Leitfaden, kein Hindernis — die Absicht wählt den Workflow; gehe nur zu /general-video, wenn das Stück deutlich länger als ~3 min ist oder ein statisches / Schleifen- / benutzerdefiniertes Format hat.

Wenn der passende Workflow nicht installiert ist

Sobald du einen Workflow ausgewählt hast, überprüfe, ob er dir tatsächlich zur Verfügung steht. Wenn die Fertigkeit des passenden Workflows nicht installiert ist, falle nicht zurück auf Raten — sage dem Benutzer, er solle sie zuerst installieren:

• Nur diesen Workflow: npx skills add heygen-com/hyperframes --skill <workflow-name> (z. B. --skill pr-to-video — bloßer Name, ohne führendes /).
• Alle Workflows auf einmal: npx skills add heygen-com/hyperframes --all (Kern + jeder Workflow, überspringt den Auswähler).

Nachdem der Benutzer es ausgeführt hat, lies die Fertigkeit des Workflows erneut und fahre fort.

Workflow-Details

/faceless-explainer

• Eingabe: Beliebiger Text — ein Thema, Artikel oder Notizen — das erklärt wird, ohne dass ein Produkt vermarktet wird oder eine Website erfasst werden muss.
• Ausgabe: Gesichtsloses Erklärvideo → MP4, jedes Bild wird vom LLM pro Szene erfunden (Typografie / Abstrakt / Diagramm / Datenvisualisierung); liefert die pin-and-paper-Voreinstellung. (Ideallänge 30–90s).
• Auslöser: „Gesichtsloses Erklärvideo über X“, „Erkläre, wie DNS funktioniert, als Video“, „Verwandle diesen Artikel in ein Erklärvideo“, „Erklärvideo aus meinen Notizen“.

/pr-to-video

• Eingabe: Ein GitHub-Pull-Request — eine PR-URL, ein owner/repo#N-Verweis oder „dieser PR“ — über die gh-CLI gelesen (keine Website zum Scrapen).
• Ausgabe: Code-Änderungs-Erklärvideo (Änderungsprotokoll / Feature-Enthüllung / Fehlerbehebung / Refactoring) → MP4 — Diff-Highlights, Vorher/Nachher, Dateibaum + Auswirkungsszenen. ≤ (Ideallänge 30–90s).
• Auslöser: „Erstelle ein Video über diesen PR“, „Verwandle PR #1187 in ein Änderungsprotokoll-Video“, „Release-Notes-Video von github.com/org/repo/pull/123“.

/embedded-captions

• Eingabe: Ein vorhandenes Talking-Head-Video (MP4) zum Untertiteln — tatsächliches Filmmaterial, keine URL oder kein Briefing. Wird lokal transkribiert (Whisper, kein API-Key) und mattiert (RVM), sodass das Subjekt Untertitel verdecken kann.
• Ausgabe: Das gleiche Filmmaterial unberührt, mit einer Untertitelebene — Standard (wortgetreue untere-Drittel-Leiste + ein eingebetteter Höhepunkt hinter dem Subjekt) oder Kinematografisch (jeder Untertitel wird hinter dem Subjekt zusammengesetzt). Jede Länge.
• Auslöser: „Füge diesem Video Untertitel hinzu“, „Untertitel hinter dem Subjekt“, „Kinematografische Untertitel für meinen Clip“.

/talking-head-recut

• Eingabe: Ein vorhandenes Talking-Head- / Interview- / Podcast-Video (MP4), das mit Bildschirmgrafiken aufbereitet werden soll — tatsächliches Filmmaterial. Wird lokal transkribiert (Whisper). Der Clip läuft vollständig darunter, unberührt.
• Ausgabe: Das gleiche Filmmaterial mit zeitgesteuerten grafischen Overlay-Karten — kinetische Titel, untere Drittel, Datenaufrufe, Pull-Quote, Seitenleisten, Bild-in-Bild — synchronisiert mit dem Transkript. Jede Länge.
• Auslöser: „Verpacke dieses Video“, „Füge grafische Overlays / untere Drittel / Datenaufrufe zu meinem Vortrag hinzu“, „Verwandle dieses Interview in eine mit Grafiken verpackte Bearbeitung“.

/motion-graphics

• Eingabe: Eine kurze, designgeführte Bewegungsgrafik, bei der die Bewegung die Botschaft ist — typischerweise unter ~10s. Genres: kinetische Typografie, ein Statistik-/Zahlen-Countup, ein Diagramm-Treffer, ein Logo-Sting, ein unteres-Drittel-/Overlay oder ein suchgesteuerter Seiten-/Tweet-/Schlagzeilen-Shot.
• Ausgabe: Eine kurze Bewegungsgrafik → MP4 oder ein transparentes Overlay (Alpha WebM / MOV) für ein unteres Drittel / einen Aufruf.
• Auslöser: „Ein 8s Logo-Sting“, „Animiere diese Statistik“, „Ein kinetischer Typografie-Intro“, „Verwandle diesen Tweet in eine Bewegungsgrafik“, „Ein transparentes Overlay für das untere Drittel“.

/slideshow

• Eingabe: Eine Präsentation / Pitch-Deck / interaktives Deck, das erstellt werden soll — ein Briefing, eine Gliederung oder eine vorhandene Seite, die in Folien umgewandelt werden soll. Keine Anfrage für ein gerendertes Video; wenn die Absicht mehrdeutig ist, bestätigt die Fertigkeit „Möchtest du dies als HyperFrames-Slideshow?“ vor der Erstellung.
• Ausgabe: Eine ausführbare HyperFrames-Komposition + eine JSON-Insel, die der SlideshowController des Players liest, um die GSAP-Zeitleiste in ein navigierbares Deck zu verwandeln — diskrete Folien, Fragment-Enthüllungen, Verzweigungssequenzen, Hotspot-Navigation, Präsentatormodus und Sprechernotizen. Das Ergebnis ist ein Deck, kein MP4.
• Auslöser: „Erstelle ein Pitch-Deck / eine Präsentation / eine Folienpräsentation“, „Ein interaktives Deck“, „Konvertiere diese Seite in Folien“, „Eine Slideshow mit Präsentatormodus“.

/general-video

• Eingabe: Alles, was nicht oben genannt ist — ein kreatives Briefing, ein einzelnes zu animierendes Element, eine Bearbeitung einer Komposition, die du erstellst. Eingabe- und längenunabhängig.
• Ausgabe: Eine HyperFrames-Komposition (beliebige Länge / jedes Format) über den ursprünglichen Ablauf: Designsystem → Prompt-Erweiterung → Plan → Layout-vor-Animation → Erstellung (Delegierung an die hyperframes-*-Fertigkeiten) → Validierung.
• Auslöser: „Erstelle eine Titelcard“, „Animiere dies“, „Ein längeres Marken-/Sizzle-Reel“, „Eine mehrszenige Komposition“, „Eine statische Schleife / ein Poster“, jedes „Erstelle ein Video“, das in keine Zeile oben passt.