HyperFrames – Starten Sie hier
HyperFrames rendert Videos aus HTML – eine Komposition ist eine HTML-Datei, deren DOM die zeitliche Steuerung mit data-*-Attributen deklariert, deren Animationslaufzeit suchbar ist und deren Medienwiedergabe vom Framework gesteuert wird. Der vollständige Autorenvertrag befindet sich in /hyperframes-core; lesen Sie ihn, bevor Sie Kompositions-HTML schreiben.
Unten finden Sie eine Capability Map (die Domain-Skills, die bei Bedarf geladen werden) und den Intent Router (wählen Sie einen Workflow für jede „Erstelle mir ein Video“-Anfrage).
Capability Map – die Domain-Skills
Atomare Fähigkeiten, die Sie bei Bedarf laden – keine vollständigen Video-Workflows. Verwenden Sie für „Erstelle mir ein Video“ den Intent Router unten.
| Sie möchten ... | Skill |
|---|---|
Eine HTML-Komposition erstellen / bearbeiten – der data-*-Vertrag, Clips, Spuren, Unterkompositionen, Variablen | /hyperframes-core |
| Animieren – atomare Bewegungen, Szenenentwürfe, Übergänge, Laufzeit-Adapter (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | /hyperframes-animation |
Kreative Richtung – frame.md / design.md, Paletten, Typografie, Erzählung, Beat-Planung, audio-reaktiv | /hyperframes-creative |
| Medien – TTS-Overvoice, Hintergrundmusik, Transkription, Hintergrundentfernung, Untertitel | /hyperframes-media |
Medienauflösung – BGM, SFX, Bilder, Icons aus dem HeyGen-Katalog finden + in .media/ mit Manifest-Nachverfolgung einfrieren | /media-use |
| CLI-Entwicklungsschleife – init, lint, validiere, inspiziere, Vorschau, rendere, veröffentliche, repariere | /hyperframes-cli |
Registry-Blöcke / Komponenten installieren (hyperframes add) | /hyperframes-registry |
Intent Routing – Wählen Sie einen Workflow
Dieser Abschnitt kennt nur die Workflows auf oberster Ebene; er lädt deren interne Referenzen oder die oben genannten Domain-Skills nicht.
Vor dem Routing – Bestätigen Sie die Eingabe, nicht die Spezifikation
Das Routing muss wissen, worum es in dem Video geht – seine Eingabe und sein Thema. Wenn dies nicht spezifiziert ist („Erstelle ein Video über unsere Sache“ ohne URL, Produkt, Thema oder Asset), fragen Sie nach, bevor Sie in einen Workflow einsteigen – die Entscheidung für einen Workflow IST die Routing-Entscheidung. Maximal zwei Fragen:
- Eingabe – ein Produkt (URL / Kurzbeschreibung), eine allgemeine Website, ein GitHub-PR, ein zu erklärendes Thema oder ein vorhandenes Talking-Head-Video?
Spezifikations-Standardwerte – Zustand, nicht fragen (sie ändern nie die Route): Seitenverhältnis 16:9 (verwenden Sie 9:16 nur für ein benanntes vertikales Ziel – TikTok / Reels / Shorts); Sprache der Erzählung / Untertitel = die des Benutzers. Der gewählte Workflow bestätigt seine eigenen Spezifika im ersten Schritt erneut.
Workflow-Spickzettel
| Workflow | Verwenden Sie es für |
|---|---|
/product-launch-video | Marketing / Einführung / Bewerbung eines Produkts – von seiner URL, einer Kurzbeschreibung oder einem Skript (auch wenn nur die Website genannt wird) |
/website-to-video | Umwandeln einer allgemeinen Website in ein Video – Website-Tour, Portfolio-/Landingpage-Präsentation, Social Clip aus den visuellen Elementen der Website |
/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 → Changelog / Feature-Enthüllung / Fix / Refactor-Erklärvideo |
/embedded-captions | Hinzufügen von Untertiteln / Untertiteln zu einem vorhandenen Talking-Head-Video (Filmmaterial bleibt unberührt) |
/talking-head-recut | Verpacken eines vorhandenen Talking-Head-Videos mit designten grafischen Overlays – Lower Thirds, Datenaufrufe, kinetische Titel, Pull Quotes |
/motion-graphics | Eine kurze, unbesprochene, designgeführte Bewegungsgrafik – kinetischer Text, eine Statistik / ein Diagramm-Hit, ein Logo-Sting, ein Lower-Third-Overlay |
/music-to-video | Ein Musiktitel → ein beat-synchronisiertes Video – Lyric-Video, Slideshow oder kinetischer Promo; die Musik bestimmt das Tempo (optionale Benutzerbilder / -videos, die auf dem Beat-Raster geschnitten werden) |
/slideshow | Eine Präsentation / ein Pitch Deck / ein 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 |
/remotion-to-hyperframes | Portieren einer vorhandenen Remotion (React)-Komposition zu HyperFrames (Migration, keine Neuerstellung) |
Disambiguierung (nur bei Verwechslungsgefahr):
- Bewegungsorientiert & unbesprochen (unter ~10s, die Bewegung ist die Botschaft) →
/motion-graphics, unabhängig von der Eingabe. - Eine URL oder ein Skript – bewirbt ein bestimmtes Produkt (auch wenn nur die Website genannt wird) →
/product-launch-video; eine allgemeine Nicht-Produkt-Website →/website-to-video; ein GitHub-PR-Link →/pr-to-video; erklärt ein Konzept ohne Produkt / Website →/faceless-explainer. Bei wirklich unklarem Produkt-vs.-Thema oder Launch-vs.-allgemeiner Website → eine Frage stellen. - Vorhandenes Filmmaterial – einfache gesprochene Untertitel →
/embedded-captions; designte Overlay-Karten →/talking-head-recut. Keines von beiden bearbeitet das Filmmaterial selbst (Neutaktung / Umfärbung / Neueinrahmung / Neuanordnung / Audio ist NLE-Schnitt – nicht im Rahmen). - Ein Musiktitel ist die Eingabe (eine Audiodatei oder ein Video, aus dem Audio extrahiert werden soll) mit keiner Erzählung →
/music-to-video– die Beats/Energie der Musik bestimmen das Tempo. (Besprochene Stücke bleiben beim eingabezugeordneten Workflow oben;/motion-graphicsist für kurze, unbesprochene Bewegungen, die nicht musikgetrieben sind.) - Eine Präsentation / ein Pitch Deck / ein interaktives Deck (diskrete Folien, Navigation, Präsentatormodus) →
/slideshow– Ausgabe ist ein navigierbares Deck, kein gerendertes Video. Eine explizite „Slideshow“-Anfrage geht direkt vor; ein benachbarter Auslöser („Deck / Folien / Präsentation / diese Seite konvertieren“) lässt/slideshowbestätigen, dass es sich um eine Slideshow handelt, bevor es erstellt wird, und wechselt bei Bedarf zum passenden Nicht-Slideshow-Workflow. - Die Länge ist ein Leitfaden, kein Hindernis – die Absicht wählt den Workflow; gehen Sie nur zu
/general-video, wenn das Stück eindeutig länger als ~3 Minuten ist oder ein statisches / Schleifen- / benutzerdefiniertes Format darstellt.
Wenn der passende Workflow nicht installiert ist
Sobald Sie einen Workflow ausgewählt haben, überprüfen Sie, ob er Ihnen tatsächlich zur Verfügung steht. Wenn der passende Workflow-Skill nicht installiert ist, raten Sie nicht, sondern teilen Sie dem Benutzer mit, dass er ihn zuerst installieren muss:
- 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 die Auswahl).
Nachdem der Benutzer den Befehl ausgeführt hat, lesen Sie den Skill des Workflows erneut und fahren Sie fort.
Skills aktuell halten
HyperFrames-Skills sind versioniert. npx hyperframes init überprüft die installierten Skills mit den neuesten auf GitHub und installiert/aktualisiert den vollständigen Satz, wenn etwas veraltet oder fehlt – ein frisch initialisiertes Projekt hat also immer den kompletten, aktuellen Satz (und die erneute Ausführung von init bei einem aktuellen Projekt ist ein No-Op). Die Überprüfung ist ein schneller GitHub-Roundtrip; offline (oder bei Ratenbegrenzung) fällt sie nach einer kurzen Zeitüberschreitung auf die Installation zurück, sodass init niemals aufgrund eines Netzwerk-Hickups hart fehlschlägt. Vollständig deaktivieren mit init --skip-skills.
Wenn eine Aufgabe sich unerwartet verhält oder vor einem langen Build, bestätigen Sie, dass die installierten Skills aktuell sind:
- Überprüfen:
npx hyperframes skills check(fügen Sie--jsonfür eine maschinenlesbare Ausgabe hinzu; beendet mit einem Code ungleich Null, wenn etwas veraltet oder fehlt). - Aktualisieren:
npx hyperframes skills update– zieht den vollständigen Satz auf die neueste Version, installiert alle noch nicht vorhandenen (derselbe Schritt wie die Installationsstufe von init).
Die CLI zeigt auch eine einzeilige Erinnerung an, wenn ein render / lint / validate-Lauf veraltete Skills 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 / eine Kurzbeschreibung, die die Website des Produkts nennt, auch ohne Link (PLV löst auf + crawlt es, es sei denn, der Benutzer lehnt ab), oder (c) ein Skript ohne ableitbare Website / „nicht scrapen“ (No-Capture-Modus – wählen Sie eine Stilvorlage, die Palette + Designsystem liefert). Ein bereitgestelltes Skript kann als wörtlicher Voice-Over oder umstrukturiert pro Szene sein – PLV fragt nach.
- Ausgabe: Produktlaunch / SaaS-Promo als HyperFrames-Komposition → MP4. (Sweet Spot 30–90s).
- Auslöser: „Launch-Video für X“, „Promo für unsere Website“, „Erkläre mein SaaS in einer Minute“, „Verwandle mein Skript in einen 60s-Promo“, „Text-only Launch-Video, nicht scrapen".
/website-to-video
- Eingabe: Eine allgemeine Website / URL, die in ein Video umgewandelt werden soll – wenn das Ziel ein Video von der Website ist, kein Produktlaunch. Mit Headless Chrome für echte Screenshots + Marken-Assets erfasst.
- Ausgabe: Eine Website-Tour / Portfolio / Landingpage-Präsentation / Social Clip, erstellt aus den eigenen visuellen Elementen der Website → MP4.
- Auslöser: „Verwandle diese Website in ein Video“, „Website-Tour von ", "Social Clip von unserer Homepage", "Ich habe nur eine URL – mach etwas".
/faceless-explainer
- Eingabe: Beliebiger Text – ein Thema, Artikel oder Notizen – der erklärt wird, ohne dass ein Produkt vermarktet oder eine Website erfasst wird. (Abgeleitet von
/product-launch-video; kein Headless Chrome.) - Ausgabe: Erklärvideo ohne Gesicht → MP4, jedes visuelle Element vom LLM pro Szene erfunden (Typografie / abstrakt / Diagramm / Datenvisualisierung); liefert die Vorlage
pin-and-papermit. (Sweet Spot 30–90s). - Auslöser: „Erklärvideo ohne Gesicht ü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-Ref oder „dieser PR“ – gelesen über diegh-CLI (keine zu scrapende Website). - Ausgabe: Code-Änderungs-Erklärvideo (Changelog / Feature-Enthüllung / Fix / Refactor) → MP4 – Diff-Highlights, Vorher/Nachher, Dateibaum + Auswirkungsszenen. ≤ (Sweet Spot 30–90s).
- Auslöser: „Erstelle 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) zum Untertiteln – tatsächliches Filmmaterial, keine URL oder Kurzbeschreibung. Lokal transkribiert (Whisper, kein API-Key) und mattiert (RVM), sodass die Person Untertitel verdecken kann.
- Ausgabe: Dasselbe Filmmaterial unberührt, mit einer Untertitelebene – Standard (wörtliche Lower-Third-Leiste + ein eingebetteter Höhepunkt hinter der Person) oder Kinematografisch (jeder Untertitel hinter der Person zusammengesetzt). Jede Länge.
- Auslöser: „Füge diesem Video Untertitel / Untertitel hinzu", "Untertitel hinter der Person", "Kinematografische 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. Lokal transkribiert (Whisper). Der Clip läuft darunter in voller Länge, unberührt.
- Ausgabe: Dasselbe Filmmaterial mit zeitlich gesteuerten Overlay-Karten – kinetische Titel, Lower Thirds, Datenaufrufe, Pull Quotes, Seitenpanels, Bild-in-Bild – synchron zum Transkript. Jede Länge.
- Auslöser: „Verpacke dieses Video", "Füge meinem Vortrag grafische Overlays / Lower Thirds / Datenaufrufe hinzu", "Verwandle dieses Interview in eine grafisch verpackte Bearbeitung".
/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 Statistik-/Zahlen-Count-up, ein Diagramm-Hit, ein Logo-Sting, ein Lower-Third-/Overlay oder ein suchgesteuerter Seiten-/Tweet-/Schlagzeilen-Shot.
- Ausgabe: Eine kurze Bewegungsgrafik → MP4 oder ein transparentes Overlay (Alpha WebM / MOV) für einen Lower-Third / Callout.
- Auslöser: „Ein 8s Logo-Sting", "Animieren Sie 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, aus dem das Audio extrahiert werden soll – mit keiner Erzählung und keiner Website-Erfassung. Optional vom Benutzer bereitgestellte Bilder / Videos zum Einweben. Der Titel wird einmal in eine deterministische Beat-/Energiekarte (
audiomap.json) analysiert, auf der das gesamte Video aufbaut. - Ausgabe: Eine beatsynchrone HyperFrames-Komposition → MP4, bei der die Musik das Tempo bestimmt. Typografie und Vorlagen sind die Basis (ein vollständiges Video benötigt null Assets); alle bereitgestellten Medien werden auf dasselbe Beat-Raster geschnitten (Beat-Cut / Ken Burns). Das Genre – Lyric-Video, Slideshow, kinetischer Promo – ergibt sich aus den Entscheidungen pro Frame; die Pipeline verzweigt nie darauf.
- Auslöser: „Erstelle ein Video für diesen Song", "Beat-synchronisiertes Video von diesem Titel", "Lyric-Video", "Verwandle diese Musik in ein Video", "Music Visualizer / kinetischer Promo zu diesem Beat".
/slideshow
- Eingabe: Eine Präsentation / ein Pitch Deck / ein interaktives Deck zum Erstellen – eine…
… [für die Übersetzung gekürzt]