Registre HyperFrames
Le registre fournit des blocs et composants réutilisables installables via hyperframes add <nom>.
- Blocs — sous-compositions autonomes (leurs 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-papier (CI/headless)
Après l'installation, la CLI affiche 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 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 exact d'élément. 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 fonctionne uniquement pour les blocs et composants ; pour les exemples, utilisez hyperframes init <dir> --example <nom>.
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— moment où le bloc apparaît dans la timeline hôte (en 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 styles, 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 le 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. Cherchez par intention avant de naviguer : le registre contient plus d'éléments que vous ne pouvez en parcourir des yeux, donc les lister et les faire correspondre par noms ou tags est une méthode lente, et elle échoue dès que le vocabulaire de l'auteur diffère du vôtre.
# Classer tout le catalogue par rapport à ce que le beat doit faire
npx hyperframes catalog --query "reveal a headline one line at a time"
npx hyperframes add caption-clip-wipe
La recherche est locale et n'envoie rien. Par défaut, elle classe sur le vocabulaire partagé avec le nom, le titre et la description de l'élément, donc elle ne trouve que les éléments qui réutilisent vos mots ; --on-device classe par sens à la place, après un téléchargement unique du modèle. Avec --json, l'enveloppe indique quel niveau a répondu, donc vérifiez-le plutôt que de supposer qu'un classement a eu lieu.
Faites toujours la requête en anglais, quelle que soit la langue de la vidéo. Le catalogue est rédigé en anglais et les deux niveaux l'indexent ainsi (le modèle on-device est également exclusivement anglais). Une requête dans une autre écriture ne produit aucun terme de recherche et ne retourne rien du tout. C'est facile à se tromper sur un projet japonais ou chinois, où le brief, les sous-titres et la narration sont tous dans cette langue et la requête suit naturellement : décrivez le mouvement en anglais, puis écrivez le texte à l'écran dans la langue dont la vidéo a besoin. Si une requête renvoie No searchable words in query, il s'agit de cette règle, pas d'un composant manquant, et cela ne vaut pas un rapport de lacune.
L'installabilité est appliquée après le classement, pas avant : un nom que les vecteurs transportent mais que ce registre ne peut pas servir est supprimé des résultats et compté dans dropped, donc un dropped non nul signifie que les deux sont de générations différentes. Voir /hyperframes-cli pour le niveau hors ligne, les portes de consentement et comment rafraîchir un index obsolète.
Pour naviguer ou filtrer au lieu de chercher :
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
Les modes tableau normal et --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 choisi immédiatement. Dans les workflows CI ou agents, préférez --json suivi d'un add explicite.
Signaler ce que le catalogue n'a pas
Lorsque la recherche revient et que rien ne fait l'affaire, dites-le avant d'écrire le mouvement à la main :
npx hyperframes feedback --search-miss "<la requête que vous avez lancée>" --wanted "<le mouvement dont vous aviez besoin>" --tier on-device
catalog --query affiche cette ligne pour vous, pré-remplie, et --json la porte comme report_gap — elle est donc déjà en main au moment où vous décidez que rien ne convient.
Signalez dès que rien dans les résultats ne fait l'affaire, quel que soit le niveau. N'attendez pas que le niveau on-device ait répondu : il nécessite un téléchargement de 33 Mo avec consentement, donc une exécution par agent est sur words sauf opt-in explicite, et se limiter à on-device ferait taire presque tous les rapports. La valeur --tier est fournie pour qu'un échec de vocabulaire reste distinguable d'un échec de sens à la lecture. Décrivez l'effet que vous vouliez, pas le nom d'élément que vous imaginiez : ce qui revient est une liste de mouvements à construire, et un rapport nommant un élément inexistant n'apprend rien. C'est le seul chemin qui envoie une requête quelque part, ce qui est exactement pourquoi il s'agit d'une commande délibérée séparée plutôt que de quelque chose que la recherche fait d'elle-même. Il ne porte aucune évaluation et n'atterrit jamais dans la métrique d'évaluation.
C'est l'ensemble du signal de demande pour le catalogue. Sauter cette étape signifie que la lacune que vous avez rencontrée est devinée à partir des compteurs d'installation, ce qui ne peut pas voir un mouvement que personne n'a pu installer.
Si la CLI ne peut pas joindre le registre configuré, inspectez le manifeste brut comme solution de repli :
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
Un registre que la CLI ne peut pas joindre ne vide pas le catalogue pour la découverte : un manifeste déjà récupéré continue de servir après sa fenêtre de rafraîchissement de 24h lorsque la revalidation échoue, donc catalog et catalog --query listent et classent toujours par rapport à la dernière copie sur le disque.
add a toujours besoin du réseau, même pour un élément installé hier. Seuls les manifestes sont mis en cache ; les fichiers réels de l'élément sont récupérés à chaque installation. Donc hors ligne, vous pouvez chercher et voir ce qu'est un élément, mais l'installation échoue lors de la récupération du fichier. Ne promettez pas une installation hors ligne à un utilisateur.
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 un nouveau bloc ou composant
Pour créer un NOUVEL élément du registre (style de sous-titre, bloc VFX, transition, tiers inférieur, ou composant réutilisable) et le livrer sous forme de PR upstream — pas en installer un existant — suivez le workflow complet idée → échafaudage → construction → validation → prévisualisation → livraison dans contributing.md. Les modèles de démarrage copier-coller (caption / VFX / component / registry-item.json) se trouvent dans templates.md.