Registre HyperFrames
Le registre fournit des blocs et composants réutilisables installables via hyperframes add <nom>.
- Blocs — sous-compositions autonomes (propres dimensions, durée, timeline). Inclus via
data-composition-srcdans une composition hôte. - Composants — snippets d'effets (pas de dimensions propres). Collés directement dans le HTML d'une composition hôte.
Référence rapide
hyperframes add data-chart # installer un bloc
hyperframes add grain-overlay # installer un composant
hyperframes add captions # installer tous les blocs taggés « captions »
hyperframes add shimmer-sweep --dir . # cibler un projet spécifique
hyperframes add data-chart --json # sortie lisible par machine
hyperframes add data-chart --no-clipboard # ignorer le presse-papiers (CI/headless)
Après installation, la CLI imprime les fichiers écrits et un snippet à coller dans votre composition hôte. Le snippet est un point de départ — vous devrez ajouter les attributs data-composition-id (doit correspondre à l'ID interne de la composition du bloc), data-start et data-track-index lors du câblage des blocs.
La valeur positionnelle est d'abord résolue comme un nom d'élément exact. Si aucun élément ne correspond et que la valeur est un tag, la commande installe tous les blocs avec ce tag. Les dépendances du registre sont installées avant l'élément demandé. hyperframes add ne fonctionne que pour les blocs et composants ; pour les exemples, utilisez hyperframes init <dossier> --example <nom> à la place.
Emplacements d'installation
Les blocs s'installent dans compositions/<nom>.html par défaut. Les composants s'installent dans compositions/components/<nom>.html par défaut.
Ces chemins sont configurables dans hyperframes.json :
{
"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
"paths": {
"blocks": "compositions",
"components": "compositions/components",
"assets": "assets"
}
}
Voir install-locations.md pour tous les détails.
Câblage des blocs
Les blocs sont des compositions autonomes — incluez-les via data-composition-src dans votre index.html hôte :
<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>
Attributs clés :
data-composition-src— chemin vers le fichier HTML du blocdata-composition-id— doit correspondre à l'ID interne du blocdata-start— quand le bloc apparaît dans la timeline hôte (secondes)data-duration— durée de lecture du blocdata-width/data-height— dimensions du canevas du blocdata-track-index— ordre des couches (plus élevé = devant)
Voir wiring-blocks.md pour tous les détails.
Câblage des composants
Les composants sont des snippets — collez leur HTML dans le balisage de votre composition, leur CSS dans votre bloc de style, et leur JS dans votre script (le cas échéant) :
- Lisez le fichier installé (ex.
compositions/components/grain-overlay.html) - Copiez les éléments HTML dans votre
<div data-composition-id="..."> - Copiez le bloc
<style>dans les styles de votre composition - Copiez tout contenu
<script>dans le script de votre composition (avant votre code de timeline) - Si le composant expose une intégration de timeline GSAP (voir le bloc de commentaires dans le snippet), ajoutez ces appels à votre timeline
Voir wiring-components.md pour tous les détails.
Découverte
Utilisez la CLI comme surface de découverte principale :
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
Le mode normal en tableau et le mode --json listent uniquement les correspondances ; installez un nom sélectionné avec hyperframes add <nom>. --human-friendly ouvre un sélecteur interactif et installe l'élément sélectionné immédiatement. Dans les workflows CI ou d'agent, privilégiez --json suivi d'un add explicite.
Si la CLI ne peut pas atteindre le registre configuré, inspectez le manifest brut en secours :
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
Chaque registry-item.json contient : nom, type, titre, description, tags, dimensions (blocs uniquement), durée (blocs uniquement) et liste de fichiers.
Voir discovery.md pour les détails sur le filtrage par type et tags.
Contribuer avec un nouveau bloc ou composant
Pour créer un NOUVEL élément du registre (style de sous-titres, bloc VFX, transition, tiers inférieur ou un composant réutilisable) et le livrer sous forme de PR en amont — et non installer un élément existant — suivez le workflow complet idée → échafaudage → construction → validation → aperçu → livraison dans contributing.md. Des modèles de démarrage (sous-titres / VFX / composant / registry-item.json) prêts à copier-coller se trouvent dans templates.md.