HyperFrames — Start hier

Was macht HyperFrames — Start hier?

HyperFrames rendert Video aus HTML – eine Komposition ist eine HTML-Datei, deren DOM das Timing mit data-*-Attributen deklariert, deren Animationslaufzeit suchbar ist und deren Medienwiedergabe vom Framework gesteuert wird. Der vollständige Autorenvertrag befindet sich in /hyperframes-core; lies ihn, bevor du Kompositions-HTML schreibst.

Unten: eine Fähigkeitskarte (die Domänenfertigkeiten, bei Bedarf geladen) und der Intent-Router (wähle einen Workflow für jede Anfrage „Mach mir ein Video“).

Fähigkeitskarte – die Domänenfertigkeiten

Atomare Fähigkeiten, die du bei Bedarf lädst – keine vollständigen Video-Workflows. Für „Mach mir ein Video“ verwende den Intent-Router unten.

Du möchtest...	Fertigkeit
Eine HTML-Komposition erstellen / bearbeiten – der data-*-Vertrag, Clips, Spuren, Unterkompositionen, Variablen	/hyperframes-core
Animieren – atomare Bewegung, Szenen-Blaupausen, Übergänge, Laufzeit-Adapter (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)	/hyperframes-animation
Kreative Leitung – frame.md / design.md, Paletten, Typografie, Erzählung, Beat-Planung, audio-reaktiv	/hyperframes-creative
Medien – TTS-Sprachausgabe, Hintergrundmusik, Transkription, Hintergrundentfernung, Untertitel	/hyperframes-media
Medienauflösung – BGM, SFX, Bilder, Symbole aus dem HeyGen-Katalog in .media/ mit Manifest-Tracking finden + einfrieren	/media-use
CLI-Entwicklungs-Loop – init, lint, validieren, inspizieren, Vorschau, rendern, veröffentlichen, reparieren	/hyperframes-cli
Registry-Blöcke / Komponenten installieren (hyperframes add)	/hyperframes-registry

---

Intent-Routing – wähle einen Workflow

Dieser Abschnitt kennt nur die Workflows der obersten Ebene; er lädt weder deren internen Referenzen noch die Domänenfertigkeiten oben.

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

Routing muss wissen, worum es im Video geht – seine Eingabe und sein Thema. Wenn dies nicht angegeben ist („Mach ein Video über unser Ding“ ohne URL, Produkt, Thema oder Asset), frage nach, bevor du in einen Workflow eintrittst – 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?

Standard-Spezifikationen – festlegen, nicht fragen (sie ändern nie die Route): Seitenverhältnis 16:9 (verwende 9:16 nur für ein benanntes vertikales Ziel – TikTok / Reels / Shorts); Erzählung / Untertitel Sprache = die des Benutzers. Der gewählte Workflow bestätigt seine eigenen Details im ersten Schritt.

Workflow-Spickzettel

Workflow	Verwende es für
/product-launch-video	Marketing / Einführung / Werbung für ein Produkt – von seiner URL, einem Briefing oder einem Skript (auch wenn die Website nur genannt wird)
/faceless-explainer	Erklärung eines Themas / Konzepts aus Text – kein Produkt, keine URL; jedes Bild ist von der KI erfunden
/pr-to-video	Ein GitHub-PR / Code-Änderung → Changelog / Feature-Enthüllung / Fix / Refactor-Erklärer
/embedded-captions	Hinzufügen von Untertiteln / Bildunterschriften zu einem vorhandenen Talking-Head-Video (Filmmaterial unberührt)
/talking-head-recut	Verpacken eines vorhandenen Talking-Head-Videos mit designten Grafik-Overlays – Lower-Thirds, Daten-Callouts, kinetische Titel, Pull-Quotes
/motion-graphics	Eine kurze, unbesprochene, designgeführte Bewegungsgrafik – kinetische Typografie, ein Stat / Chart-Treffer, ein Logo-Sting, ein Lower-Third-Overlay
/music-to-video	Ein Musiktitel → ein beat-synchronisiertes Video – Lyrikvideo, Diashow oder kinetischer Werbespot; die Musik treibt das Tempo (optionale Benutzerbilder / -videos, die auf das Beat-Raster zugeschnitten sind)
/slideshow	Eine Präsentation / Pitch-Deck / interaktives Deck – einzelne Folien, Fragmente, Verzweigungen, Hotspots; Ausgabe ist ein navigierbares Deck, kein gerendertes Video
/general-video	Alles andere – längere oder multi-szenische Stücke, eine statische Schleife / ein Poster, eine benutzerdefinierte Komposition oder eine allgemeine Site-Tour, wenn kein spezialisierter Workflow passt
/remotion-to-hyperframes	Portieren einer vorhandenen Remotion (React)-Komposition zu HyperFrames (Migration, keine Erstellung)

Disambiguierung (nur wo verwirrend):

• Bewegungsbasiert & unbesprochen (unter ~10s, die Bewegung ist die Botschaft) → /motion-graphics, unabhängig von der Eingabe.
• Eine URL oder ein Skript – vermarktet ein bestimmtes Produkt (auch wenn nur die Website genannt wird) → /product-launch-video; eine allgemeine Nicht-Produkt-Website → /general-video; ein GitHub-PR-Link → /pr-to-video; erklärt ein Konzept ohne Produkt / Website → /faceless-explainer. Wirklich unklar ob Produkt-vs-Thema oder Launch-vs-allgemeine-Website → eine Frage stellen.
• Vorhandenes Filmmaterial – einfache gesprochene Untertitel → /embedded-captions; designte Overlay-Karten → /talking-head-recut. Keine ändert das Filmmaterial selbst (Zeitsteuerung / Neufärbung / Neuausrichtung / Neuanordnung / Audio ist NLE-Bearbeitung – nicht im Rahmen).
• Ein Musiktitel ist die Eingabe (eine Audiodatei oder ein Video, um das Audio zu extrahieren) mit keiner Erzählung → /music-to-video – die Beats / Energie des Liedes treiben das Tempo. (Erzählte Stücke bleiben beim oben passenden Workflow; /motion-graphics ist für kurze, unbesprochene Bewegungen, die nicht musikgesteuert sind.)
• Eine Präsentation / Pitch-Deck / interaktives Deck (einzelne Folien, Navigation, Präsentatormodus) → /slideshow – Ausgabe ist ein navigierbares Deck, kein gerendertes Video. Eine explizite „Diashow“-Anfrage geht direkt weiter; ein angrenzender Auslöser („Deck / Folien / Präsentation / diese Seite konvertieren“) lässt /slideshow vor der Erstellung bestätigen, ob es eine Diashow ist, und wechselt zu einem anderen, nicht-diashow-Workflow, wenn nicht.
• Länge ist eine Richtschnur, kein Tor – die Absicht wählt den Workflow; gehe nur zu /general-video, wenn das Stück deutlich länger als ~3 Minuten 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 passende Workflow-Fertigkeit nicht installiert ist, falle nicht auf Raten zurück – 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 – nackter Name, kein führendes /).
• Alle Workflows auf einmal: npx skills add heygen-com/hyperframes --all (Core + jeder Workflow, überspringt den Picker).

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

Fertigkeiten aktuell halten

HyperFrames-Fertigkeiten sind versioniert. npx hyperframes init überprüft die installierten Fertigkeiten gegen die neuesten auf GitHub und installiert / aktualisiert den vollständigen Satz, wenn etwas veraltet oder fehlt – ein frisch initiiertes Projekt hat also immer den vollständigen, neuesten Satz (und das erneute Ausführen von init auf einem aktuellen Projekt ist ein No-op). Die Überprüfung ist ein schneller GitHub-Roundtrip; offline (oder bei Ratenbegrenzung) fällt sie auf die Installation nach einem kurzen Timeout zurück, sodass init bei einem Netzwerk-Hickup nie hart fehlschlägt. Die Erstellungs-Workflows verwenden init als Gerüst, sodass das Starten eines neuen Projekts diese Überprüfung immer durchführt und unsere neuesten Fertigkeiten von GitHub zieht, wenn sie veraltet sind. Das Flag --skip-skills ist derzeit neutralisiert (eine vorübergehende Maßnahme, während das skills.sh-Register aufholt): Wenn es übergeben wird, wird die Überprüfung nicht mehr übersprungen, sodass jedes init GitHub überprüft. CI/Tests optieren sich mit der Umgebungsvariablen HYPERFRAMES_SKIP_SKILLS=1 aus.

Wenn eine Aufgabe sich unerwartet verhält oder vor einem langen Build, bestätige, dass die installierten Fertigkeiten aktuell sind:

• Überprüfen: npx hyperframes skills check (füge --json für ein maschinenlesbares Ergebnis hinzu; beendet mit Nicht-Null, wenn etwas veraltet oder fehlt).
• Aktualisieren: npx hyperframes skills update – zieht den vollständigen Satz auf den neuesten Stand, installiert noch nicht vorhandene (gleicher Schritt wie die Installation in init).

Das CLI zeigt auch eine einzeilige Erinnerung an, wenn ein render / lint / validate-Lauf veraltete Fertigkeiten erkennt.

Workflow-Details

/product-launch-video

• Eingabe: Ein Produkt, das vermarktet wird – (a) eine Produkt-URL (mit Headless Chrome für Assets + Marken-Token gecrawlt), (b) ein Skript / Briefing, das die Website des Produkts auch ohne Link nennt (PLV löst auf + crawlt sie, es sei denn, der Benutzer wählt ab), oder (c) ein Skript ohne ableitbare Website / „Nicht scrapen“ (No-Capture-Modus – wähle eine Stilvorgabe, die Palette + Designsystem liefert). Ein bereitgestelltes Skript kann die wörtliche Sprachausgabe oder pro Szene umstrukturiert sein – PLV fragt nach.
• Ausgabe: Produkt-Launch / SaaS-Werbespot als HyperFrames-Komposition → MP4. (Sweet Spot 30–90s).
• Auslöser: „Launch-Video für X“, „Werbespot für unsere Website“, „Erkläre mein SaaS in einer Minute“, „Verwandle mein Skript in einen 60s-Werbespot“, „Textbasiertes Launch-Video, nicht scrapen“.

/faceless-explainer

• Eingabe: Beliebiger Text – ein Thema, Artikel oder Notizen – der erklärt wird, ohne dass ein Produkt vermarktet wird oder eine Website erfasst wird. (Abgeleitet von /product-launch-video; kein Headless Chrome.)
• Ausgabe: Erklärfilm ohne Gesicht → MP4, jedes Bild KI-erfunden pro Szene (Typografie / abstrakt / Diagramm / Datenvisualisierung); liefert die pin-and-paper-Voreinstellung. (Sweet Spot 30–90s).
• Auslöser: „Erklärfilm ohne Gesicht über X“, „Erkläre, wie DNS als Video funktioniert“, „Verwandle diesen Artikel in einen Erklärfilm“, „Erklärer aus meinen Notizen“.

/pr-to-video

• Eingabe: Ein GitHub-Pull-Request – eine PR-URL, eine owner/repo#N-Referenz oder „dieser PR“ – gelesen über die gh-CLI (keine zu scrapende Website).
• Ausgabe: Code-Änderungs-Erklärer (Changelog / Feature-Enthüllung / Fix / Refactor) → MP4 – Diff-Highlights, Vorher/Nachher, Dateibaum + Auswirkungsszenen. (Sweet Spot 30–90s).
• Auslöser: „Mach ein Video über diesen PR“, „Verwandle PR #1187 in ein Changelog-Video“, „Release-Notes-Video von github.com/org/repo/pull/123“.

/embedded-captions

• Eingabe: Ein vorhandenes Talking-Head-Video (MP4), das untertitelt werden soll – tatsächliches Filmmaterial, keine URL oder kein Briefing. Wird lokal transkribiert (Whisper, kein API-Key) und gerahmt (RVM), sodass das Motiv die Untertitel verbergen kann.
• Ausgabe: das gleiche Filmmaterial unberührt, mit einer Untertitelebene – Standard (wörtliche Lower-Third-Schiene + ein eingebetteter Höhepunkt hinter dem Motiv) oder Kinematographisch (jeder Untertitel hinter dem Motiv zusammengesetzt). Beliebig lang.
• Auslöser: „Untertitel / Bildunterschriften zu diesem Video hinzufügen“, „Untertitel hinter dem Motiv“, „kinematographische Untertitel für meinen Clip“.

/talking-head-recut

• Eingabe: Ein vorhandenes Talking-Head- / Interview- / Podcast-Video (MP4), das mit Bildschirmgrafiken verpackt werden soll – tatsächliches Filmmaterial. Wird lokal transkribiert (Whisper). Der Clip läuft vollständig darunter, unberührt.
• Ausgabe: das gleiche Filmmaterial mit zeitgesteuerten Grafik-Overlay-Karten – kinetische Titel, Lower-Thirds, Daten-Callouts, Pull-Quotes, Seitenpaneele, Bild-im-Bild – synchronisiert zum Transkript. Beliebig lang.
• Auslöser: „Dieses Video verpacken“, „Grafik-Overlays / Lower-Thirds / Daten-Callouts zu meinem Vortrag hinzufügen“, „Dieses Interview in eine grafisch verpackte Bearbeitung verwandeln“.

/motion-graphics

• Eingabe: Eine kurze, designgeführte Bewegungsgrafik, bei der die Bewegung die Botschaft ist – typischerweise unter ~10s, keine Erzählung. Genres: kinetische Typografie, ein Stat / Zahlen-Count-up, ein Chart-Treffer, ein Logo-Sting, ein Lower-Third / Overlay oder ein suchgesteuerter Seiten- / Tweet- / Überschriftenschuss.
• Ausgabe: eine kurze Bewegungsgrafik → MP4 oder ein transparentes Overlay (Alpha-WebM / MOV) für ein Lower-Third / Callout.
• Auslöser: „Ein 8s-Logo-Sting“, „Animiere diese Statistik“, „Ein kinetischer Typo-Intro“, „Verwandle diesen Tweet in eine Bewegungsgrafik“, „Ein transparentes Lower-Third-Overlay“.

/music-to-video

• Eingabe: Ein Musiktitel – eine Audiodatei oder ein Video, um das Audio zu extrahieren – mit keiner Erzählung und keiner Website-Erfassung. Optional vom Benutzer bereitgestellte Bilder / Videos zum Einweben. Der Titel wird einmal in eine deterministische Beat- / Energie-Karte (audiomap.json) analysiert, auf der das gesamte Video aufbaut.
• Ausgabe: eine beat-synchronisierte HyperFrames-Komposition → MP4, bei der die Musik das Tempo treibt. Typografie und Vorlagen sind das Minimum (ein vollständiges Video benötigt keine Assets); alle bereitgestellten Medien werden auf dasselbe Beat-Raster geschnitten (Beat-Cut / Ken-Burns). Das Genre – Lyrikvideo, Diashow, kinetischer Werbespot – ergibt sich aus den per-Frame-Entscheidungen; die Pipeline verzweigt nie danach.
• Auslöser: „Mach ein Video zu diesem Song“, „Beat-synchronisiertes Video aus diesem Track“, „Lyrikvideo“, „Verwandle diese Musik in ein Video“, „Musikvisualisierer / kinetischer Werbespot zu diesem Beat“.

/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-Diashow?“ vor der Erstellung.
• Ausgabe: Eine ausführbare HyperFrames-Komposition + eine JSON-Insel, die der SlideshowController des Players liest, um …