HyperFrames Registry
Die Registry bietet wiederverwendbare Blöcke und Komponenten, die über hyperframes add <name> installiert werden können.
- Blöcke — eigenständige Subkompositionen (eigene Abmessungen, Dauer, Zeitleiste). Eingebunden via
data-composition-srcin 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 jeden Block mit dem Tag "captions"
hyperframes add shimmer-sweep --dir . # ziele auf 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, sowie 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 mit diesem Namen ü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 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-Zeitleiste erscheint (Sekunden)data-duration— wie lange der Block abgespielt wirddata-width/data-height— Block-Leinwandabmessungendata-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:
- 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 etwaige
<script>-Inhalte in das Skript Ihrer Komposition (vor Ihrem Zeitleisten-Code) - Wenn die Komponente eine GSAP-Zeitleistenintegration bereitstellt (siehe Kommentarblock im Snippet), fügen Sie diese Aufrufe zu Ihrer Zeitleiste hinzu
Siehe wiring-components.md für vollständige Details.
Discovery
Verwenden Sie die CLI als primäre Oberfläche für die Discovery. Suchen Sie nach Absicht, bevor Sie stö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 scheitert immer dann, wenn die Wortwahl des Autors von Ihrer abweicht.
# Bewerte den gesamten Katalog danach, was der Beat tun soll
npx hyperframes catalog --query "eine Überschrift Zeile für Zeile enthüllen"
npx hyperframes add caption-clip-wipe
Die Suche erfolgt lokal und sendet nichts. Standardmäßig bewertet sie basierend auf dem Vokabular, 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, also überprüfen Sie das, anstatt anzunehmen, dass eine Bewertung stattgefunden hat.
Die Installierbarkeit wird nach der Bewertung angewendet, nicht davor: Ein Name, den die Vektoren transportieren, den diese Registry aber nicht bedienen kann, wird aus den Ergebnissen entfernt und in dropped gezählt – ein Nicht-Null-dropped bedeutet, dass die beiden unterschiedliche Generationen sind. Siehe /hyperframes-cli für die Offline-Stufe, die Zustimmungsgate‘s und wie ein veralteter Index aktualisiert wird.
Zum Stöbern oder Filtern anstelle der Suche:
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 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.
Wenn die CLI die konfigurierte Registry nicht erreichen kann, überprüfen Sie das rohe Manifest als Fallback:
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
Die registry-item.json jedes Elements enthält: name, type, title, description, tags, dimensions (nur Blöcke), duration (nur Blöcke) und file list.
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 (Captions-Stil, VFX-Block, Übergang, Lower Third oder eine wiederverwendbare Komponente) zu verfassen und als Upstream-PR einzureichen – nicht um ein vorhandenes zu installieren – befolgen Sie den vollständigen Workflow von Idee → Gerüst → Bauen → Validieren → Vorschau → Versand in contributing.md. Copy-Paste-Startvorlagen (Caption / VFX / Component / registry-item.json) finden Sie in templates.md.