denameidina/hyperframes-video-workflow

HyperFrames — hier starten

HyperFrames rendert Video 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 Authoring-Vertrag befindet sich in /hyperframes-core; lies ihn, bevor du Kompositions-HTML schreibst.

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

Fähigkeitskarte — die Domänenfähigkeiten

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…	Fähigkeit
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-Reaktivität	/hyperframes-creative
Medien — TTS-Sprachausgabe, Hintergrundmusik, Transkription, Hintergrundentfernung, Untertitel	/hyperframes-media
Medien auflösen — BGM, SFX, Bilder, Icons aus dem HeyGen-Katalog finden und einfrieren in .media/ mit Manifest-Nachverfolgung	/media-use
CLI-Entwicklungsschleife — init, lint, validieren, inspizieren, Vorschau, rendern, veröffentlichen, diagnostizieren	/hyperframes-cli
Registry-Blöcke / -Komponenten installieren (hyperframes add)	/hyperframes-registry

---

Intent-Routing — wähle einen Workflow

Dieser Abschnitt kennt nur die übergeordneten Workflows; er lädt nicht ihre internen Referenzen oder die obigen Domänenfähigkeiten.

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

Das Routing muss wissen, worum es im Video geht — seine Eingabe und sein Thema. Wenn das nicht angegeben ist („Mach ein Video über unser Ding“ ohne URL, Produkt, Thema oder Asset), frage nach, bevor du einen Workflow betrittst — die Entscheidung für einen Workflow IST die Routing-Entscheidung. Höchstens 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-Standards — 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); Erzählungs- / Untertitel-Sprache = die des Benutzers. Der gewählte Workflow bestätigt seine eigenen Spezifika in seinem ersten Schritt.

Workflow-Spickzettel

Workflow	Verwende es für
/product-launch-video	Ein Produkt verkaufen (SaaS, App, Unternehmens-/Produktseite) — von einer URL, Kurzbeschreibung oder einem Skript → eine Werbung. Der Standard für jede kommerzielle URL, selbst wenn nur die Seite genannt wird.
/website-to-video	Eine Seite selbst zeigen — eine Tour / Präsentation, die aus den eigenen Screenshots der Seite erstellt wurde. Für nicht-kommerzielle Seiten (Portfolio, Blog, Doku, persönlich, Event) oder wenn der Benutzer eine Tour möchte, keine Werbung.
/faceless-explainer	Ein Thema / Konzept erklären aus Text — kein Produkt, keine URL; jedes Bild wird vom LLM erfunden
/pr-to-video	Ein GitHub-PR / eine Codeänderung → Erklärvideo für Changelog / Feature-Enthüllung / Fix / Refactoring
/embedded-captions	Untertitel / Bildunterschriften zu einem vorhandenen Talking-Head-Video hinzufügen (Filmmaterial unberührt)
/talking-head-recut	Ein vorhandenes Talking-Head-Video mit gestalteten grafischen Overlays verpacken — Lower Thirds, Daten-Callouts, kinetische Titel, Pull-Quote
/motion-graphics	Eine kurze, unbesprochene, designorientierte Bewegungsgrafik — kinetischer Text, ein Statistik-/Diagramm-Hit, ein Logo-Sting, ein Lower-Third-Overlay
/music-to-video	Ein Musiktitel → ein beat-synchronisiertes Video — Lyric-Video, Diashow oder kinetische Werbung; die Musik treibt das Tempo (optionale Benutzerbilder / -videos werden auf dem Beat-Raster geschnitten)
/slideshow	Eine Präsentation / Pitch-Deck / interaktive Präsentation — einzelne 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, nicht Erstellung)

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 — frage eine Sache: Verkauft die Seite ein Produkt? Ja (SaaS / App / Produkt / Unternehmensseite) → /product-launch-video — eine Werbung und der Standard für jede kommerzielle URL, selbst wenn nur die Seite genannt wird. Nein, oder der Benutzer möchte die Seite einfach so zeigen, wie sie ist (Portfolio / Blog / Doku / persönlich / Event) → /website-to-video — eine Tour. Ein GitHub-PR-Link → /pr-to-video; ein Konzept ohne Produkt oder Seite → /faceless-explainer.
• Vorhandenes Filmmaterial — einfache gesprochene Untertitel → /embedded-captions; gestaltete Overlay-Karten → /talking-head-recut. Keines von beiden bearbeitet das Filmmaterial selbst (Neuschnitt / Recolour / Neurahmen / Neuanordnen / Audio ist NLE-Schnitt — außerhalb des Rahmens).
• Ein Musiktitel ist die Eingabe (eine Audiodatei oder ein Video, um Audio daraus zu extrahieren) mit keiner Erzählung → /music-to-video — die Beats / Energie der Musik treiben das Tempo. (Besprochene Stücke bleiben beim eingabeabgestimmten Workflow oben; /motion-graphics ist für kurze unbesprochene Bewegungen, die nicht von Musik angetrieben werden.)
• Eine Präsentation / Pitch-Deck / interaktive Präsentation (diskrete Folien, Navigation, Präsentatormodus) → /slideshow — Ausgabe ist ein navigierbares Deck, kein gerendertes Video. Eine explizite „Diashow“-Anfrage fährt direkt fort; ein angrenzender Auslöser („Deck / Folien / Präsentation / diese Seite konvertieren“) lässt /slideshow bestätigen, dass es eine Diashow ist, bevor es erstellt wird, und wechselt zum entsprechenden Nicht-Diashow-Workflow, wenn nicht.
• Länge ist ein Leitfaden, kein Tor — der Intent 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 der passende Workflow-Skill nicht installiert ist, falle nicht auf Raten zurück — sage dem Benutzer, er soll ihn zuerst installieren:

• Nur diesen Workflow: npx skills add heygen-com/hyperframes --skill <Workflow-Name> (z. B. --skill pr-to-video — reiner Name, ohne führenden /).
• 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, lese den Skill des Workflows erneut und fahre fort.

Skills aktuell halten

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

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

• Prüfen: npx hyperframes skills check (füge --json für ein maschinenlesbares Urteil hinzu; beendet sich mit Nicht-Null, wenn etwas veraltet oder fehlt).
• Aktualisieren: npx hyperframes skills update — zieht den vollständigen Satz auf den neuesten Stand, installiert alle noch nicht vorhandenen (gleich wie der Installationsschritt von init).

Die CLI zeigt auch eine einzeilige Erinnerung an, wenn ein render / lint / validate-Durchlauf veraltete Skills erkennt.

Workflow-Details

/product-launch-video

• Eingabe: Ein vermarktetes Produkt — (a) eine Produkt-URL (mit Headless Chrome für Assets + Marken-Token gecrawlt), (b) ein Skript / eine Kurzbeschreibung, die die Seite des Produkts auch ohne Link nennt (PLV löst auf + crawlt sie, es sei denn, der Benutzer lehnt ab), oder (c) ein Skript ohne ableitbare Seite / „Nicht scrapen“ (No-Capture-Modus — wähle eine Stilvorlage, die Palette + Designsystem liefert). Ein geliefertes Skript kann die wörtliche Sprachausgabe sein oder pro Szene umstrukturiert — PLV fragt.
• Ausgabe: eine Produkteinführungs- / SaaS-Werbung als HyperFrames-Komposition → MP4 (Sweet Spot 30–90s) — der Wert des Produkts ist das Thema, nicht ein Rundgang durch die Website. Für eine einfache Tour der Website verwende /website-to-video.
• Auslöser: „Launch-Video für X“, „Werbespot für unsere Seite“, „Erkläre mein SaaS in einer Minute“, „Verwandle mein Skript in einen 60s-Werbespot“, „Text-Only-Launch-Video, nicht scrapen“.

/website-to-video

• Eingabe: Eine Website / URL, deren Ziel es ist, die Seite selbst zu zeigen, nicht ein Produkt zu verkaufen. Am besten für nicht-kommerzielle Seiten (Portfolio, Blog, Doku, persönlich, Event) oder wenn der Benutzer explizit eine Tour einer Website so wie sie ist möchte. Erfasst mit Headless Chrome für echte Screenshots + Marken