heygen-com/hyperframes

Plugin-Installationen: Führen Sie vor Setup- oder Freshness-Befehlen die Plugin-Installationsregeln aus, wenn sich dieser Skill in einem HyperFrames-Plugin befindet. Eigenständige Installationen behalten die folgenden Aktualisierungshinweise bei.

HyperFrames Registry

Die Registry bietet wiederverwendbare Blöcke und Komponenten, die über hyperframes add <name> installiert werden können.

• Blöcke – eigenständige Unterkompositionen (eigene Abmessungen, Dauer, Timeline). Eingebunden über data-composition-src in einer Host-Komposition.
• Komponenten – Effekt-Snippets (keine eigenen Abmessungen). Direkt in das HTML einer Host-Komposition eingefügt.

Kurzreferenz

hyperframes add data-chart              # Installiere einen Block
hyperframes add grain-overlay           # Installiere eine Komponente
hyperframes add captions                # Installiere alle Blöcke mit dem Tag captions
hyperframes add shimmer-sweep --dir .   # Ziel ein bestimmtes Projekt
hyperframes add data-chart --json       # Maschinenlesbare Ausgabe
hyperframes add data-chart --no-clipboard  # Zwischenablage überspringen (CI/headless)

Nach der Installation gibt die CLI aus, welche Dateien geschrieben wurden, und ein Snippet zum Einfügen in Ihre Host-Komposition. Das Snippet ist ein Ausgangspunkt – Sie müssen die Attribute data-composition-id (muss mit der internen Kompositions-ID des Blocks übereinstimmen), data-start und data-track-index hinzufügen, wenn Sie Blöcke verdrahten.

Der Positionswert wird zuerst als exakter Elementname aufgelöst. Wenn kein Element übereinstimmt und der Wert ein Tag ist, installiert der Befehl jeden Block mit diesem Tag. Registry-Abhängigkeiten werden vor dem angeforderten Element installiert. hyperframes add funktioniert nur für Blöcke und Komponenten; für Beispiele verwenden Sie stattdessen hyperframes init <dir> --example <name>.

Installationsorte

Blöcke werden standardmäßig in compositions/<name>.html installiert. Komponenten werden standardmäßig in compositions/components/<name>.html installiert.

Diese Pfade sind in hyperframes.json konfigurierbar:

{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

Siehe install-locations.md für vollständige Details.

Blöcke verdrahten

Blöcke sind eigenständige Kompositionen – binden Sie sie über data-composition-src in Ihre Host-index.html ein:

<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Wichtige Attribute:

• data-composition-src – Pfad zur Block-HTML-Datei
• data-composition-id – muss mit der internen ID des Blocks übereinstimmen
• data-start – wann der Block in der Host-Timeline erscheint (Sekunden)
• data-duration – wie lange der Block abgespielt wird
• data-width / data-height – Block-Canvas-Abmessungen
• data-track-index – Ebenen-Reihenfolge (höher = weiter vorne)

Siehe wiring-blocks.md für vollständige Details.

Komponenten verdrahten

Komponenten sind Snippets – fügen Sie ihr HTML in das Markup Ihrer Komposition, ihr CSS in Ihren Style-Block und ihr JS in Ihr Skript (falls vorhanden) ein:

1. Lesen Sie die installierte Datei (z.B. compositions/components/grain-overlay.html)
2. Kopieren Sie die HTML-Elemente in den <div data-composition-id="..."> Ihrer Komposition
3. Kopieren Sie den <style>-Block in die Styles Ihrer Komposition
4. Kopieren Sie etwaige <script>-Inhalte in das Skript Ihrer Komposition (vor Ihrem Timeline-Code)
5. Wenn die Komponente eine GSAP-Timeline-Integration bereitstellt (siehe Kommentarblock im Snippet), fügen Sie diese Aufrufe zu Ihrer Timeline hinzu

Siehe wiring-components.md für vollständige Details.

Entdeckung

Verwenden Sie die CLI als primäre Entdeckungsoberfläche. Suchen Sie nach Absicht vor dem Durchstöbern: Die Registry enthält mehr Elemente, als Sie mit dem Auge scannen können, daher ist das Auflisten und Abgleichen von Namen oder Tags der langsame Weg, und er schlägt fehl, wenn die Wortwahl des Autors von Ihrer abweicht.

# Bewerten Sie den gesamten Katalog gegen das, was der Beat tun soll
npx hyperframes catalog --query "reveal a headline one line at a time"
npx hyperframes add caption-clip-wipe

Die Suche ist lokal und sendet nichts. Standardmäßig bewertet sie anhand des Vokabulars, das mit dem Namen, Titel und der Beschreibung des Elements geteilt wird, sodass sie nur Elemente findet, die Ihre Wörter wiederverwenden; --on-device bewertet stattdessen nach Bedeutung, nach einem einmaligen Modell-Download. Mit --json geben die Umschläge an, welche Stufe geantwortet hat, überprüfen Sie dies also, anstatt anzunehmen, dass eine Bewertung stattgefunden hat.

Fragen Sie immer auf Englisch ab, unabhängig von der Sprache des Videos. Der Katalog ist auf Englisch verfasst, und beide Stufen indizieren ihn auf diese Weise (das On-Device-Modell ist ebenfalls nur Englisch). Eine Abfrage in einer anderen Schrift erzeugt keine durchsuchbaren Begriffe und gibt überhaupt nichts zurück. Dies kann bei einem japanischen oder chinesischen Projekt leicht falsch gemacht werden, bei dem das Briefing, die Untertitel und der Voice-Over alle in dieser Sprache sind und die Abfrage natürlich folgt: Beschreiben Sie die Bewegung auf Englisch, schreiben Sie dann den On-Screen-Text in der Sprache, die das Video benötigt. Wenn eine Abfrage mit No searchable words in query zurückkommt, liegt dies an dieser Regel, nicht an einer fehlenden Komponente, und es ist keinen Lückenbericht wert.

Die Installierbarkeit wird nach der Bewertung angewendet, nicht davor: Ein Name, den die Vektoren tragen, den diese Registry aber nicht bedienen kann, wird aus den Ergebnissen entfernt und in dropped gezählt, sodass ein Nicht-Null-dropped bedeutet, dass es sich um verschiedene Generationen handelt. Siehe /hyperframes-cli für die Offline-Stufe, die Zustimmungsgates und wie ein veralteter Index aktualisiert wird.

Zum Stöbern oder Filtern anstatt Suchen:

npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly

Der normale Tabellenmodus und der --json-Modus listen nur Übereinstimmungen auf; installieren Sie einen ausgewählten Namen mit hyperframes add <name>. --human-friendly öffnet eine interaktive Auswahl und installiert das ausgewählte Element sofort. In CI- oder Agenten-Workflows bevorzugen Sie --json, gefolgt von einem expliziten add.

Melden, was der Katalog nicht hat

Wenn die Suche zurückkommt und nichts darin die Aufgabe erfüllt, sagen Sie dies, bevor Sie die Bewegung von Hand erstellen:

npx hyperframes feedback --search-miss "<die von Ihnen ausgeführte Abfrage>" --wanted "<die benötigte Bewegung>" --tier on-device

catalog --query druckt diese Zeile für Sie vorausgefüllt, und --json führt sie als report_gap mit – sie liegt also bereits vor, wenn Sie entscheiden, dass nichts passt.

Melden Sie immer, wenn nichts in den Ergebnissen die Aufgabe erfüllt, auf beiden Stufen. Warten Sie nicht darauf, dass die On-Device-Stufe geantwortet hat: Sie benötigt einen zugestimmten 33 MB Download, daher läuft ein Agentenlauf auf words, es sei denn, er hat sich explizit dafür entschieden, und eine Einschränkung auf on-device würde fast jeden Bericht zum Schweigen bringen. Der --tier-Wert reist mit, sodass eine Vokabularverfehlung von einer Bedeutungsverfehlung unterscheidbar bleibt, wenn diese gelesen werden. Beschreiben Sie den Effekt, den Sie wollten, nicht den Elementnamen, den Sie sich vorgestellt haben: Was zurückkommt, ist eine Liste von Bewegungen, die es wert sind, gebaut zu werden, und ein Bericht, der ein nicht existierendes Element benennt, lehrt nichts. Dies ist der einzige Pfad, der eine Abfrage irgendwohin sendet, was genau der Grund ist, warum es ein separater, bewusster Befehl ist und nicht etwas, das die Suche von selbst tut. Er trägt keine Bewertung und landet nie in der Bewertungsmetrik.

Dies ist das gesamte Nachfragesignal für den Katalog. Das Überspringen bedeutet, dass die getroffene Lücke stattdessen anhand von Installationszahlen erraten wird, was eine Bewegung nicht sehen kann, die niemand installieren konnte.

Wenn die CLI die konfigurierte Registry nicht erreichen kann, überprüfen Sie das Rohmanifest als Fallback:

curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

Eine Registry, die die CLI nicht erreichen kann, leert den Katalog für die Entdeckung nicht: Ein zuvor abgerufenes Manifest bedient weiterhin sein 24-Stunden-Aktualisierungsfenster, wenn die Revalidierung fehlschlägt, sodass catalog und catalog --query weiterhin gegen die letzte Kopie auf der Festplatte auflisten und bewerten.

add benötigt dennoch das Netzwerk, selbst für ein Element, das Sie gestern installiert haben. Nur Manifeste werden zwischengespeichert; die tatsächlichen Dateien des Elements werden bei jeder Installation abgerufen. Offline können Sie also suchen und sehen, was ein Element ist, aber die Installation schlägt beim Dateiabruf fehl. Versprechen Sie einem Benutzer keine Offline-Installation.

Die Datei registry-item.json eines jeden Elements enthält: Name, Typ, Titel, Beschreibung, Tags, Abmessungen (nur Blöcke), Dauer (nur Blöcke) und Dateiliste.

Siehe discovery.md für Details zum Filtern nach Typ und Tags.

Beitrag eines neuen Blocks oder einer neuen Komponente

Um ein NEUES Registry-Element (Untertitel-Stil, VFX-Block, Übergang, Lower Third oder eine wiederverwendbare Komponente) zu erstellen und als Upstream-PR auszuliefern – nicht eines zu installieren – folgen Sie dem vollständigen Workflow Idee → Gerüst → Bauen → Validieren → Vorschau → Ausliefern in contributing.md. Copy-Paste-Startvorlagen (Untertitel / VFX / Komponente / registry-item.json) finden Sie in templates.md.