HyperFrames — commencez ici
HyperFrames génère des vidéos à partir de 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. Le contrat d'édition complet se trouve dans /hyperframes-core ; lisez-le avant d'écrire du HTML de composition.
Ci-dessous : une carte des capacités (les compétences du domaine, chargées à la demande) et le routeur d'intention (choisissez un workflow pour toute demande « fais-moi une vidéo »).
Carte des capacités — les compétences du domaine
Capacités atomiques que vous chargez à la demande — pas des workflows vidéo complets. Pour « fais-moi une vidéo », utilisez le routeur d'intention ci-dessous.
| Vous voulez… | Compétence |
|---|---|
Créer / éditer une composition HTML — le contrat data-*, clips, pistes, sous-compositions, variables | /hyperframes-core |
| Animer — mouvement atomique, blueprints de scène, transitions, adaptateurs runtime (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | /hyperframes-animation |
Direction créative — frame.md / design.md, palettes, typographie, narration, planification des beats, audio-réactif | /hyperframes-creative |
| Média — voix off TTS, musique de fond, transcription, suppression d'arrière-plan, sous-titres | /hyperframes-media |
Résolution de médias — trouver + figer BGM, SFX, images, icônes du catalogue HeyGen dans .media/ avec suivi de manifeste | /media-use |
| Boucle de développement CLI — init, lint, valider, inspecter, prévisualiser, rendre, publier, docteur | /hyperframes-cli |
Installer des blocs / composants du registre (hyperframes add) | /hyperframes-registry |
Routage d'intention — choisissez un workflow
Cette section ne connaît que les workflows de haut niveau ; elle ne charge pas leurs références internes ni les compétences du domaine ci-dessus.
Avant le routage — confirmez 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 ressource), demandez avant d'entrer dans un workflow — s'engager sur 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 PR GitHub, un sujet à expliquer, ou une vidéo existante de tête parlante ?
Valeurs par défaut du cahier des charges — énoncez, ne demandez pas (elles ne changent jamais la route) : format 16:9 (utilisez 9:16 uniquement pour une destination verticale nommée — TikTok / Reels / Shorts) ; langue de la narration / des sous-titres = celle de l'utilisateur. Le workflow choisi confirme ses propres spécificités à sa première étape.
Aide-mémoire des workflows
| Workflow | Utilisez-le pour |
|---|---|
/product-launch-video | Vendre un produit (SaaS, application, site d'entreprise / produit) — à partir d'une URL, d'un brief ou d'un script → une promo. Le défaut pour toute URL commerciale, même si le site est seulement nommé. |
/website-to-video | Montrer un site lui-même — une visite / vitrine construite à partir des propres captures d'écran du site. Pour les sites non commerciaux (portfolio, blog, docs, personnel, événement), ou quand l'utilisateur veut une visite, pas une promo. |
/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 PR GitHub / modification de code → journal des modifications / révélation de fonctionnalité / correctif / explicateur de refactor |
/embedded-captions | Ajouter des sous-titres / légendes à une vidéo existante de tête parlante (images non modifiées) |
/talking-head-recut | Emballer une vidéo existante de tête parlante avec des superpositions graphiques conçues — bas de page, appels de données, titres cinétiques, citations en exergue |
/motion-graphics | Un court graphisme animé non narré et axé sur le design — typographie cinétique, un hit de statistique / graphique, un logo sting, une superposition de bas de page |
/music-to-video | Une piste musicale → une vidéo synchronisée sur le beat — vidéo lyrique, diaporama ou promo cinétique ; la musique dicte le rythme (images / vidéos facultatives de l'utilisateur coupées sur la grille de beats) |
/slideshow | Une présentation / pitch deck / deck interactif — diapositives discrètes, fragments, embranchements, zones interactives ; la sortie 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 / une affiche, une composition personnalisée |
/remotion-to-hyperframes | Porter une composition Remotion (React) existante vers HyperFrames (migration, pas création) |
Désambiguïsation (uniquement là où il y a confusion) :
- Priorité au mouvement et non narré (moins de ~10s, le mouvement est le message) →
/motion-graphics, quel que soit l'entrée. - Une URL ou un script — demandez une chose : le site vend-il un produit ? Oui (SaaS / appli / produit / site d'entreprise) →
/product-launch-video— une promo, et le défaut pour toute URL commerciale même si le site est seulement nommé. Non, ou l'utilisateur veut simplement que le site soit montré tel quel (portfolio / blog / docs / personnel / événement) →/website-to-video— une visite. Un lien de PR GitHub →/pr-to-video; un concept sans produit ni site →/faceless-explainer. - Séquence existante — sous-titres parlés simples →
/embedded-captions; cartes de superposition conçues →/talking-head-recut. Aucun ne modifie la séquence elle-même (ré-timing / recolorisation / recadrage / réorganisation / audio relève du montage NLE — hors de portée). - Une piste musicale est l'entrée (un fichier audio, ou une vidéo dont extraire l'audio) avec aucune narration →
/music-to-video— les beats/l'énergie de la musique dictent le rythme. (Les pièces narrées restent avec le workflow correspondant à l'entrée ci-dessus ;/motion-graphicsest pour les mouvements courts non narrés qui ne sont pas guidés par la musique.) - Une présentation / pitch deck / deck interactif (diapositives discrètes, navigation, mode présentateur) →
/slideshow— la sortie est un deck navigable, pas une vidéo rendue. Une demande explicite de « diaporama » s'exécute directement ; un déclencheur adjacent (« deck / diapositives / présentation / convertir cette page ») fait confirmer à/slideshowqu'il s'agit bien d'un diaporama avant la création, et passer au workflow non-diaporama approprié si ce n'est pas le cas. - La durée est un guide, pas une barrière — l'intention choisit le workflow ; allez vers
/general-videouniquement lorsque la pièce est clairement plus longue qu'environ 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 disponible. 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 nu, sans/initial). - Tous les workflows à la fois :
npx skills add heygen-com/hyperframes --all(core + chaque workflow, ignore le sélecteur).
Après l'exécution, relisez la compétence du workflow et continuez.
Maintenir les compétences à jour
Les compétences HyperFrames sont versionnées. npx hyperframes init vérifie les compétences installées par rapport aux dernières sur GitHub et installe/rafraîchit l'ensemble complet dès que quelque chose est obsolète ou manquant — ainsi un projet fraîchement initialisé a toujours l'ensemble complet et le plus récent (et réexécuter init sur un projet à jour est une opération nulle). La vérification est un aller-retour rapide vers GitHub ; hors ligne (ou limité en débit), elle tombe en mode dégradé en installant après un court délai d'attente, donc init n'échoue jamais définitivement sur un incident réseau. Les workflows de création préparent avec init, donc démarrer un nouveau projet exécute toujours cette vérification et récupère nos dernières compétences depuis GitHub lorsqu'elles sont obsolètes. Le drapeau --skip-skills est actuellement neutralisé (une mesure temporaire pendant que le registre skills.sh rattrape son retard) : le passer ne saute plus la vérification, donc chaque init vérifie GitHub. Les CI/tests se désengagent via la variable d'environnement HYPERFRAMES_SKIP_SKILLS=1.
Si une tâche se comporte de manière inattendue, ou avant une longue construction, confirmez que les compétences installées sont à jour :
- Vérifier :
npx hyperframes skills check(ajoutez--jsonpour un verdict lisible par machine ; sort avec un code non nul lorsque quelque chose est obsolète ou manquant). - Mettre à jour :
npx hyperframes skills update— récupère l'ensemble complet vers la dernière version, installant ceux pas encore présents (identique à l'étape d'installation de init).
Le CLI affiche également un rappel d'une ligne lorsqu'une exécution render / lint / validate détecte des compétences obsolètes.
Détails des workflows
/product-launch-video
- Entrée : Un produit commercialisé — (a) une URL de produit (explorée avec Chrome headless pour les ressources + les tokens de marque), (b) un script / brief qui nomme le site du produit même sans lien (PLV résout + explore, sauf si l'utilisateur refuse), ou (c) un script sans site dérivable / « ne pas explorer » (mode sans capture — choisissez un préréglage de style qui fournit palette + système de design). Un script fourni peut être la verbatim voix off ou restructuré par scène — PLV demande.
- Sortie : une promo de lancement de produit / SaaS en tant que composition HyperFrames → MP4 (point idéal 30–90s) — la valeur du produit est le sujet, pas une visite guidée du site. Pour une simple visite du site, utilisez
/website-to-video. - Déclencheurs : « vidéo de lancement pour X », « promo pour notre site », « explique mon SaaS en une minute », « transforme mon script en une promo de 60s », « vidéo de lancement texte uniquement, ne pas explorer ».
/website-to-video
- Entrée : Un site web / URL dont le but est de montrer le site lui-même, pas de vendre un produit. Idéal pour les sites non commerciaux (portfolio, blog, docs, personnel, événement), ou quand l'utilisateur veut explicitement une visite du site tel quel. Capturé avec Chrome headless pour de vraies captures d'écran + marque