Installation du plugin : Avant les commandes de configuration ou de rafraîchissement, suivez les règles d'installation du plugin lorsque cette compétence se trouve à l'intérieur d'un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.
Registre HyperFrames
Le registre fournit des blocs et des 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 — extraits 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 tagué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 extrait à coller dans votre composition hôte. L'extrait est un point de départ — vous devrez ajouter les attributs data-composition-id (doit correspondre à l'ID de composition 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 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 fonctionne uniquement pour les blocs et les composants ; pour les exemples, utilisez hyperframes init <dir> --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— combien de temps le bloc est ludata-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 extraits — 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é (par exemple,
compositions/components/grain-overlay.html) - Copiez les éléments HTML dans le
<div data-composition-id="...">de votre composition - Copiez le bloc
<style>dans les styles de votre composition - Copiez tout 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 l'extrait), 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. Recherchez par intention avant de parcourir : le registre contient plus d'éléments que vous ne pouvez en parcourir des yeux, donc les lister et les faire correspondre sur les noms ou les tags est la voie lente, et elle échoue chaque fois que le libellé de l'auteur diffère du vôtre.
# Classe l'ensemble du catalogue par rapport à ce que le beat devrait 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 en fonction du 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 signification à la place, après un téléchargement unique du modèle. Avec --json, l'enveloppe nomme le niveau qui a répondu, alors vérifiez cela plutôt que de supposer qu'un classement a eu lieu.
Effectuez 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 de cette façon (le modèle sur l'appareil est également en anglais uniquement). Une requête dans un autre script ne produit aucun terme de recherche et ne retourne rien du tout. Il est facile de 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 la copie à l'écran dans la langue requise par la vidéo. Si une requête revient avec No searchable words in query, c'est cette règle, pas un composant manquant, et cela ne vaut pas un rapport d'écart.
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 parcourir ou filtrer au lieu de rechercher :
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 tableau normal et le mode --json ne listent que les correspondances ; installez un nom sélectionné avec hyperframes add <nom>. --human-friendly ouvre un sélecteur interactif et installe immédiatement l'élément sélectionné. Dans les workflows CI ou d'agent, 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 de créer manuellement le mouvement :
npx hyperframes feedback --search-miss "<la requête que vous avez exécutée>" --wanted "<le mouvement dont vous aviez besoin>" --tier on-device
catalog --query imprime cette ligne pour vous, pré-remplie, et --json la porte comme report_gap — donc elle est déjà en main au moment où vous décidez que rien ne convient.
Signalez chaque fois que rien dans les résultats ne fait l'affaire, sur l'un ou l'autre niveau. N'attendez pas que le niveau sur l'appareil ait répondu : il nécessite un téléchargement de 33 Mo consentis, donc une exécution d'agent est sur words sauf si elle a explicitement adhéré, et se baser sur on-device réduirait au silence presque tous les rapports. La valeur --tier vous accompagne afin qu'un échec de vocabulaire reste distinguable d'un échec de sens lors de la lecture de ces rapports. Décrivez l'effet que vous souhaitiez, pas le nom de l'élément que vous imaginiez : ce qui revient est une liste de mouvements dignes d'être construits, 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 distincte plutôt que quelque chose que la recherche fait toute seule. Il ne comporte aucune évaluation et n'atterrit jamais dans la métrique d'évaluation.
C'est l'intégralité du signal de demande pour le catalogue. L'ignorer signifie que l'écart que vous avez rencontré est deviné à partir des comptages d'installation, ce qui ne peut pas voir un mouvement que personne n'a pu installer.
Si la CLI ne peut pas atteindre le registre configuré, inspectez le manifeste brut comme solution de secours :
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
Un registre que la CLI ne peut pas atteindre ne vide pas le catalogue pour la découverte : un manifeste précédemment récupéré continue de servir au-delà de sa fenêtre d'actualisation de 24h chaque fois que 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 rechercher et voir ce qu'est un élément, mais son installation échoue lors de la récupération du fichier. Ne promettez pas à un utilisateur une installation hors ligne.
Le fichier registry-item.json de chaque élément contient : le nom, le type, le titre, la description, les tags, les dimensions (blocs uniquement), la durée (blocs uniquement) et la liste des fichiers.
Voir discovery.md pour plus de détails sur le filtrage par type et par tag.
Contribuer avec 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 amont — pas en installer un existant — suivez le workflow complet idée → échafaudage → construction → validation → prévisualisation → livraison dans contributing.md. Des modèles de démarrage copiables (sous-titre / VFX / composant / registry-item.json) se trouvent dans templates.md.