HyperFrames — commencez ici
HyperFrames génère de la vidéo à partir d'HTML — une composition est un fichier HTML dont le DOM déclare le timing avec des attributs data-*, dont le runtime d'animation est navigable, et dont la lecture multimédia est gérée par le framework.
Cette compétence est le guide technique d'utilisation — elle est intentionnellement non-design. Pour les recettes de motion / animation, voir /hyperframes-motion. Pour les directives de design (palettes, typographie, préréglages de cadre), voir /hyperframes-design. Ci-dessous : une carte des capacités de chaque sujet HyperFrames, un index des guides thématiques de ce qui se trouve dans cette compétence, et un routeur d'intention pour choisir un workflow.
Carte des capacités — les compétences HyperFrames
Trois compétences, une par domaine. Celle-ci est le guide technique d'utilisation. Les deux autres couvrent le design.
| Vous voulez… | Compétence |
|---|---|
| Comment utiliser HyperFrames — contrat de composition, boucle de développement CLI, installation de blocs / composants du registre (cette compétence) | /hyperframes |
| Motion / animation — règles de mouvement atomiques, plans de scène, transitions, adaptateurs runtime (GSAP / Lottie / Three.js) | /hyperframes-motion |
| Design — palettes, typographie, préréglages de cadre, planification rythmique, décisions de marque / style (pas de recettes d'animation) | /hyperframes-design |
Guide thématique — ce que contient cette compétence
Le guide technique d'utilisation est divisé en trois sous-thèmes. Chacun a son propre SKILL.md et dossier references/ :
| Sous-thème | Chemin | À lire pour |
|---|---|---|
| Composition core | core/SKILL.md | Le contrat de composition — attributs data-*, clips, pistes, sous-compositions, variables, règles de déterminisme |
| Boucle CLI | cli/SKILL.md | npx hyperframes init / lint / validate / inspect / preview / render + rendu cloud AWS Lambda |
| Ajout au registre | registry/SKILL.md | hyperframes add <bloc-ou-composant> — emplacements d'installation, câblage des blocs, câblage des composants, contribution de nouveaux éléments |
Les détails par thème se trouvent dans le dossier references/ de chaque sous-thème. Pour les spécificités des runtimes d'animation (API GSAP, Lottie, Three.js, etc.) voir /hyperframes-motion → adapters/<runtime>.md.
Routage d'intention — choisir un workflow
Cette section ne connaît que les workflows de haut niveau ; elle ne charge pas leurs références internes ni les guides thématiques ci-dessus.
Avant le routage — confirmer l'entrée, pas le cahier des charges
Le routage a besoin de savoir de quoi parle la vidéo — son entrée et son sujet. Si ce n'est pas spécifié ("fais une vidéo sur notre truc" sans URL, produit, sujet ou contenu), demander avant d'entrer dans un workflow — s'engager dans un workflow EST la décision de routage. Au maximum deux questions :
- Entrée — un produit (URL / brief), un site web général, une Pull Request GitHub, un sujet à expliquer, ou une vidéo existante avec une personne qui parle ?
Valeurs par défaut du cahier des charges — indiquer, ne pas demander (elles ne changent jamais la route) : aspect 16:9 (utiliser 9:16 uniquement pour une destination verticale nommée — TikTok / Reels / Shorts) ; langue des sous-titres = celle de l'utilisateur. Le workflow choisi reconfirme ses propres spécificités à sa première étape.
Aide-mémoire des workflows
| Workflow | À utiliser pour |
|---|---|
/faceless-explainer | Expliquer un sujet / concept à partir de texte — pas de produit, pas d'URL ; chaque visuel est inventé par LLM |
/pr-to-video | Une Pull Request / changement de code GitHub → vidéo de changelog / révélation de fonctionnalité / correction / refactorisation |
/embedded-captions | Ajouter des sous-titres à une vidéo existante avec une personne qui parle (séquence intacte) |
/talking-head-recut | Emballer une vidéo existante avec une personne qui parle avec des incrustations graphiques conçues — tiers inférieurs, encadrés de données, titres animés, citations mises en avant |
/motion-graphics | Un motion design court, guidé par le design — typographie cinétique, une statistique / un graphique percutant, un logo sting, une incrustation tiers inférieur |
/slideshow | Une présentation / pitch deck / deck interactif — diapositives discrètes, fragments, branchements, zones interactives ; le résultat est un deck navigable, pas une vidéo rendue |
/general-video | Tout le reste — pièces plus longues ou multi-scènes, une boucle statique / affiche, une composition personnalisée |
Désambiguïsation (uniquement là où c'est confus) :
- Motion d'abord (moins de ~10s, le mouvement est le message) →
/motion-graphics, quelle que soit l'entrée. - Une URL ou un script — un lien de Pull Request GitHub →
/pr-to-video; explique un concept sans produit / site →/faceless-explainer. Entrée vraiment floue → poser une question. - Séquence existante — sous-titres simples de parole →
/embedded-captions; cartes d'incrustation conçues →/talking-head-recut. Aucun des deux ne modifie la séquence elle-même (re-timing / recolor / recadrage / réorganisation est un montage NLE — hors du cadre). - Une présentation / pitch deck / deck interactif (diapositives discrètes, navigation, mode présentateur) →
/slideshow— le résultat est un deck navigable, pas une vidéo rendue. Une demande explicite de "diaporama" procède directement ; un déclencheur adjacent ("deck / diapositives / présentation / convertir cette page") fait confirmer/slideshowqu'il s'agit bien d'un diaporama avant de créer, et basculer vers le workflow non-diaporama approprié si ce n'est pas le cas. - La longueur est un guide, pas une contrainte — l'intention choisit le workflow ; aller vers
/general-videouniquement lorsque la pièce est clairement plus longue que ~3 min, ou qu'il s'agit d'un format statique / boucle / personnalisé.
Si le workflow correspondant n'est pas installé
Une fois que vous avez choisi un workflow, vérifiez qu'il vous est effectivement accessible. Si la compétence du workflow correspondant n'est pas installée, ne retombez pas sur des suppositions — dites à l'utilisateur de l'installer d'abord :
- Juste ce workflow :
npx skills add heygen-com/hyperframes --skill <nom-du-workflow>(par ex.--skill pr-to-video— nom simple, sans/au début). - Tous les workflows d'un coup :
npx skills add heygen-com/hyperframes --all(core + tous les workflows, ignore le sélecteur).
Après que l'utilisateur l'a exécuté, relisez la compétence du workflow et continuez.
Détails des workflows
/faceless-explainer
- Entrée : Texte arbitraire — un sujet, un article ou des notes — qui est expliqué, sans produit commercialisé ni site à capturer.
- Résultat : explicateur sans visage → MP4, chaque visuel inventé par LLM par scène (typographie / abstrait / diagramme / visualisation de données) ; livre le préréglage
pin-and-paper. (zone idéale 30–90s). - Déclencheurs : "explicateur sans visage sur X", "explique comment fonctionne le DNS en vidéo", "transforme cet article en explicateur", "explicateur à partir de mes notes".
/pr-to-video
- Entrée : Une Pull Request GitHub — une URL de PR, une référence
owner/repo#N, ou "cette PR" — lue via la CLIgh(pas un site à scraper). - Résultat : explicateur de changement de code (changelog / révélation de fonctionnalité / correction / refactorisation) → MP4 — surlignages de diff, avant/après, arborescence de fichiers + scènes d'impact. ≤ (zone idéale 30–90s).
- Déclencheurs : "fais une vidéo sur cette PR", "transforme la PR #1187 en vidéo de changelog", "vidéo de notes de version à partir de github.com/org/repo/pull/123".
/embedded-captions
- Entrée : Une vidéo existante avec une personne qui parle (MP4) à sous-titrer — séquence réelle, pas une URL ou un brief. Transcrite localement (Whisper, pas de clé API) et matée (RVM) pour que le sujet puisse occlure les sous-titres.
- Résultat : la même séquence inchangée, avec une couche de sous-titres — Standard (rail tiers inférieur textuel + un sous-titre culminant incrusté derrière le sujet) ou Cinématographique (chaque sous-titre composité derrière le sujet). N'importe quelle durée.
- Déclencheurs : "ajoute des sous-titres à cette vidéo", "sous-titres derrière le sujet", "sous-titres cinématographiques pour mon clip".
/talking-head-recut
- Entrée : Une vidéo existante avec une personne qui parle / interview / podcast (MP4) à emballer avec des graphiques à l'écran — séquence réelle. Transcrite localement (Whisper). Le clip est lu en entier en dessous, inchangé.
- Résultat : la même séquence avec des cartes d'incrustation graphiques minutées — titres animés, tiers inférieurs, encadrés de données, citations mises en avant, panneaux latéraux, incrustation d'image — synchronisées avec la transcription. N'importe quelle durée.
- Déclencheurs : "emballe cette vidéo", "ajoute des incrustations graphiques / tiers inférieurs / encadrés de données à ma présentation", "transforme cette interview en montage avec graphiques".
/motion-graphics
- Entrée : Un motion design court, guidé par le design, où le mouvement est le message — généralement moins de ~10s. Genres : typographie cinétique, une statistique / décompte numérique, un graphique percutant, un logo sting, un tiers inférieur / incrustation, ou une page / tweet / titre de une piloté par recherche.
- Résultat : un motion design court → MP4 ou une incrustation transparente (alpha WebM / MOV) pour un tiers inférieur / encadré.
- Déclencheurs : "un logo sting de 8s", "anime cette statistique", "une intro en typographie cinétique", "transforme ce tweet en motion design", "une incrustation transparente tiers inférieur".
/slideshow
- Entrée : Une présentation / pitch deck / deck interactif à créer — un brief, un plan, ou une page existante à convertir en diapositives. Pas une demande de vidéo rendue ; si l'intention est ambiguë, la compétence confirme "voulez-vous cela comme un diaporama HyperFrames ?" avant de créer.
- Résultat : une composition HyperFrames exécutable + une île JSON que le
SlideshowControllerdu lecteur lit pour transformer la timeline GSAP en un deck navigable — diapositives discrètes, révélations de fragments, séquences de branchement, navigation par zones interactives, mode présentateur et notes de l'orateur. Le livrable est un deck, pas un MP4. - Déclencheurs : "fais un pitch deck / une présentation / un diaporama", "un deck interactif", "convertit cette page en diapositives", "un diaporama avec mode présentateur".
/general-video
- Entrée : Tout ce qui n'est pas ci-dessus — un brief créatif, un seul élément à animer, une modification d'une composition que vous construisez. Indépendant de l'entrée et de la durée.
- Résultat : une composition HyperFrames (n'importe quelle durée / format) via le flux original : système de design → expansion de prompt → plan → mise en page avant animation → construction (en déléguant aux compétences
hyperframes-*) → validation. - Déclencheurs : "fais une carte de titre", "anime ceci", "une bande de marque / démo plus longue", "une composition multi-scènes", "une boucle statique / affiche", toute demande "fais une vidéo" qui ne correspond à aucune ligne ci-dessus.