HyperFrames Registry
Die Registry stellt wiederverwendbare Blöcke und Komponenten bereit, die über hyperframes add <name> installiert werden können.
- Blöcke — eigenständige Sub-Kompositionen (eigene Abmessungen, Dauer, Timeline). Einbindung via
data-composition-srcin einer Host-Komposition. - Komponenten — Effekt-Snippets (keine eigenen Abmessungen). Werden direkt in das HTML der Host-Komposition eingefügt.
Kurzreferenz
hyperframes add data-chart # Block installieren
hyperframes add grain-overlay # Komponente installieren
hyperframes add captions # Alle Blöcke mit dem Tag 'captions' installieren
hyperframes add shimmer-sweep --dir . # Zielprojekt angeben
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, sowie ein Snippet zum Einfügen in Ihre Host-Komposition. Das Snippet ist ein Ausgangspunkt – Sie müssen beim Verdrahten von Blöcken die Attribute data-composition-id (muss mit der internen Kompositions-ID des Blocks übereinstimmen), data-start und data-track-index hinzufügen.
Der Positionswert wird zuerst als exakter Elementname aufgelöst. Wenn kein Element übereinstimmt und der Wert ein Tag ist, installiert der Befehl alle Blöcke 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"
}
}
Vollständige Details finden Sie unter install-locations.md.
Blöcke verdrahten
Blöcke sind eigenständige Kompositionen – binden Sie sie via 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-Dateidata-composition-id— muss mit der internen ID des Blocks übereinstimmendata-start— wann der Block in der Host-Timeline erscheint (Sekunden)data-duration— wie lange der Block abgespielt wirddata-width/data-height— Block-Leinwandabmessungendata-track-index— Ebenen-Reihenfolge (höher = weiter vorne)
Vollständige Details finden Sie unter wiring-blocks.md.
Komponenten verdrahten
Komponenten sind Snippets – fügen Sie ihr HTML in das Markup Ihrer Komposition ein, ihr CSS in den Style-Block und ihr JS in Ihr Skript (falls vorhanden):
- Lesen Sie die installierte Datei (z.B.
compositions/components/grain-overlay.html) - Kopieren Sie die HTML-Elemente in das
<div data-composition-id="...">Ihrer Komposition - Kopieren Sie den
<style>-Block in die Styles Ihrer Komposition - Kopieren Sie etwaigen
<script>-Inhalt in das Skript Ihrer Komposition (vor Ihrem Timeline-Code) - Falls die Komponente eine GSAP-Timeline-Integration bereitstellt (siehe Kommentarblock im Snippet), fügen Sie diese Aufrufe zu Ihrer Timeline hinzu
Vollständige Details finden Sie unter wiring-components.md.
Erkennung
Verwenden Sie die CLI als primäres Erkennungswerkzeug. Suchen Sie nach Absicht, nicht nach Kategorien: Die Registry enthält mehr Elemente, als Sie manuell durchsuchen könnten; das Auflisten und Abgleichen von Namen oder Tags ist der langsame Weg und scheitert, sobald die Wortwahl des Autors von Ihrer abweicht.
# Den gesamten Katalog danach bewerten, was der Beat tun soll
npx hyperframes catalog --query "eine Überschrift zeilenweise enthüllen"
npx hyperframes add caption-clip-wipe
Die Suche erfolgt lokal und sendet nichts. Standardmäßig bewertet sie anhand des gemeinsamen Vokabulars mit Name, Titel und Beschreibung des Elements, findet also nur Elemente, die Ihre Wörter wiederverwenden; --on-device bewertet stattdessen nach Bedeutung, nach einem einmaligen Modell-Download. Mit --json gibt der Umschlag an, welche Stufe geantwortet hat – überprüfen Sie dies, anstatt anzunehmen, dass eine Bewertung stattgefunden hat.
Fragen Sie immer auf Englisch, unabhängig von der Sprache des Videos. Der Katalog ist auf Englisch verfasst, und beide Stufen indizieren ihn so (das On-Device-Modell ist ebenfalls nur englischsprachig). Eine Frage in einer anderen Schriftart erzeugt keine durchsuchbaren Begriffe und liefert überhaupt nichts zurück. Dies ist bei einem japanischen oder chinesischen Projekt leicht falsch zu machen, bei dem das Briefing, die Untertitel und die Erzählung alle in dieser Sprache sind und die Frage natürlicherweise folgt: Beschreiben Sie die Bewegung auf Englisch, schreiben Sie dann den On-Screen-Text in der Sprache, die das Video benötigt. Sollte eine Frage mit No searchable words in query zurückkommen, liegt dies an dieser Regel, nicht an einer fehlenden Komponente, und es lohnt sich nicht, einen Lückenbericht zu erstellen.
Die Installierbarkeit wird nach der Bewertung angewendet, nicht davor: Ein Name, den die Vektoren tragen, den diese Registry jedoch nicht ausliefern kann, wird aus den Ergebnissen entfernt und in dropped gezählt; ein dropped-Wert ungleich Null bedeutet daher, dass die beiden unterschiedliche Generationen sind. Siehe /hyperframes-cli für die Offline-Stufe, die Zustimmungsabfragen und wie ein veralteter Index aktualisiert wird.
Zum Durchsuchen oder Filtern statt 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 --json listen nur Treffer 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 Agent-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 "<Ihre ausgeführte Abfrage>" --wanted "<Die benötigte Bewegung>" --tier on-device
catalog --query gibt diese Zeile für Sie vorausgefüllt aus, und --json trägt sie als report_gap – 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 Agent auf words, es sei denn, er hat explizit zugestimmt, und sich auf on-device zu beschränken, würde fast jeden Bericht unterdrücken. Der --tier-Wert reist mit, sodass ein Vokabular-Fehltreffer von einem Bedeutungs-Fehltreffer unterscheidbar bleibt, wenn diese gelesen werden. Beschreiben Sie den gewünschten Effekt, nicht den erdachten Elementnamen: Was zurückkommt, ist eine Liste von Bewegungen, die es wert sind, gebaut zu werden, und ein Bericht, der ein nicht existierendes Element nennt, lehrt nichts. Dies ist der einzige Pfad, der eine Abfrage irgendwohin sendet, weshalb 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 Bedarfssignal für den Katalog. Das Überspringen führt dazu, dass die Lücke, auf die Sie gestoßen sind, stattdessen aus Installationszahlen geschätzt wird, die eine Bewegung, die niemand installieren konnte, nicht sehen können.
Wenn die CLI die konfigurierte Registry nicht erreichen kann, überprüfen Sie das Roh-Manifest 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 NICHT für die Erkennung: Ein zuvor abgerufenes Manifest wird auch nach Ablauf des 24-Stunden-Aktualisierungsfensters weiterhin bedient, wenn die erneute Validierung fehlschlägt, sodass catalog und catalog --query weiterhin anhand der letzten Kopie auf der Festplatte auflisten und bewerten.
add benötigt dennoch das Netzwerk, selbst für ein gestern installiertes Element. Nur Manifeste werden zwischengespeichert; die eigentlichen 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.
Jede registry-item.json enthält: Name, Typ, Titel, Beschreibung, Tags, Abmessungen (nur Blöcke), Dauer (nur Blöcke) und Dateiliste.
Details zum Filtern nach Typ und Tags finden Sie unter discovery.md.
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 um ein bestehendes 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.