HyperFrames — commencez ici
HyperFrames effectue le rendu 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 accessible, et dont la lecture multimédia est gérée par le framework. Le contrat d'écriture complet se trouve dans /hyperframes-core ; lisez-le avant d'écrire le HTML de la 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 requête "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 |
|---|---|
Écrire / éditer une composition HTML — le contrat data-*, clips, pistes, sous-compositions, variables | /hyperframes-core |
| Animer — mouvement atomique, plans 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 temps forts, audio-réactif | /hyperframes-creative |
| Médias — voix off TTS, musique de fond, transcription, suppression d'arrière-plan, sous-titres | /hyperframes-media |
Résolution de médias — trouver et geler BGM, SFX, images, icônes du catalogue HeyGen dans .media/ avec un suivi du manifeste | /media-use |
| Boucle de dev CLI — init, lint, valider, inspecter, prévisualiser, render, publier, doctor | /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 doit savoir quel est le sujet de la vidéo — son entrée et son sujet. Si cela 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 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 PR GitHub, un sujet à expliquer, ou une vidéo existante avec une personne qui parle ?
Paramètres par défaut — énoncez, ne demandez pas (ils 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 reconfirme ses propres spécificités à sa première étape.
Aide-mémoire des workflows
| Workflow | À utiliser pour |
|---|---|
/product-launch-video | Marketing / lancement / promotion d'un produit — à partir de son URL, d'un brief, ou d'un script (même si le site est seulement nommé) |
/faceless-explainer | Expliquer un sujet / concept à partir de texte — pas de produit, pas d'URL ; chaque visuel est inventé par le LLM |
/pr-to-video | Une PR GitHub / modification de code → journal des modifications / révélation de fonctionnalité / correction / refactorisation explicative |
/embedded-captions | Ajouter des sous-titres / légendes à une vidéo existante avec une personne qui parle (images non modifiées) |
/talking-head-recut | Emballer une vidéo existante avec une personne qui parle avec des superpositions graphiques conçues — tiers inférieurs, appels de données, titres cinétiques, citations |
/motion-graphics | Un court motion graphic, non narré, axé sur le design — typographie cinétique, un hit statistique / graphique, un logo sting, une superposition de tiers inférieur |
/music-to-video | Une piste musicale → une vidéo synchronisée sur le rythme — vidéo lyrique, diaporama, ou promo cinétique ; la musique pilote le rythme (images / vidéos utilisateur optionnelles coupées sur la grille de beats) |
/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, ou une visite générale de site quand aucun workflow spécialisé ne correspond |
/remotion-to-hyperframes | Porter une composition Remotion (React) existante vers HyperFrames (migration, pas création) |
Désambiguïsation (uniquement là où c'est ambigu) :
- 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 — commercialise un produit spécifique (même juste en nommant le site) →
/product-launch-video; un site non produit général →/general-video; un lien PR GitHub →/pr-to-video; explique un concept sans produit / site →/faceless-explainer. Produit-vs-sujet vraiment ambigu, ou lancement-vs-site général → posez une question. - Images existantes — sous-titres simples de paroles →
/embedded-captions; cartes de superposition conçues →/talking-head-recut. Aucun des deux ne modifie les images elles-mêmes (re-timing / recolorier / recadrer / réordonner / audio est un 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 pilotent le rythme. (Les pièces narrées restent dans le workflow correspondant à l'entrée ci-dessus ;/motion-graphicsest pour les mouvements courts non narrés qui ne sont pas pilotés par la musique.) - 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 "slideshow" va directement ; un déclencheur adjacent ("deck / slides / présentation / convertir cette page") fait confirmer par/slideshowqu'il s'agit bien d'un slideshow avant d'écrire, et bascule vers le workflow non-slideshow 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 est 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 bien accessible. Si la compétence du workflow correspondant n'est pas installée, ne revenez pas à une estimation — dites à l'utilisateur de l'installer d'abord :
- Juste ce workflow :
npx skills add heygen-com/hyperframes --skill <nom-du-workflow>(p. ex.--skill pr-to-video— nom simple, sans/au début). - Tous les workflows en une fois :
npx skills add heygen-com/hyperframes --all(cœur + chaque workflow, ignore le sélecteur).
Après que l'utilisateur l'a exécuté, relisez la compétence du workflow et continuez.
Garder 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 quand quelque chose est obsolète ou manquant — donc un projet fraîchement initialisé a toujours l'ensemble complet le plus récent (et réexécuter init sur un projet à jour est une opération sans effet). La vérification est un aller-retour rapide vers GitHub ; hors ligne (ou limité en débit) il revient à installer après un court délai d'attente, donc init n'échoue jamais durement sur un hoquet réseau. Les workflows de création génèrent la structure 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 quand elles sont obsolètes. Le flag --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. 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 ; se termine par un code non nul quand quelque chose est obsolète ou manquant). - Mettre à jour :
npx hyperframes skills update— récupère l'ensemble complet à la dernière version, installant tout ce qui n'est pas encore présent (comme l'étape d'installation d'init).
La CLI affiche également un rappel d'une ligne quand 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 sans tête pour les ressources + les marqueurs 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 preset de style qui fournit palette + système de design). Un script fourni peut être la voix off textuelle ou restructurée par scène — PLV demande.
- Résultat : lancement de produit / promo SaaS en tant que composition HyperFrames → MP4. (point idéal 30–90s).
- 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 uniquement textuelle, ne explore pas".
/faceless-explainer
- Entrée : Texte arbitraire — un sujet, article, ou notes — en cours d'explication, sans produit commercialisé ni site à capturer. (Issu de
/product-launch-video; pas de Chrome sans tête.) - Résultat : explicateur sans visage → MP4, chaque visuel inventé par le LLM par scène (typographie / abstrait / diagramme / visualisation de données) ; fournit le preset
pin-and-paper. (point idéal 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
owner/repo#N, ou "cette PR" — lue via la CLIgh(pas un site à explorer). - Résultat : explicateur de modification de code (journal des modifications / révélation de fonctionnalité / correction / refactorisation) → MP4 — surlignages de diff, avant/après, arborescence de fichiers + scènes d'impact. ≤ (point idéal 30–90s).
- Déclencheurs : "fais une vidéo sur cette PR", "transforme la PR #1187 en vidéo de journal des modifications", "vidéo de notes de version depuis github.com/org/repo/pull/123".
/embedded-captions
- Entrée : Une vidéo existante avec une personne qui parle (MP4) à sous-titrer — les images réelles, pas une URL ou un brief. Transcrite localement (Whisper, pas de clé API) et matifiée (RVM) pour que le sujet puisse masquer les sous-titres.
- Résultat : les mêmes images non modifiées, avec une couche de sous-titres — Standard (bandeau textuel textuel en bas + un point culminant intégré derrière le sujet) ou Cinématographique (chaque sous-titre composé derrière le sujet). N'importe quelle durée.
- Déclencheurs : "ajoute des sous-titres / légendes à 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) à empaqueter avec des graphiques à l'écran — les images réelles. Transcrite localement (Whisper). Le clip est lu en entier en dessous, non modifié.
- Résultat : les mêmes images avec des cartes de superposition graphiques temporisées — titres cinétiques, tiers inférieurs, appels de données, citations, panneaux latéraux, incrustation — synchronisées sur la transcription. N'importe quelle durée.
- Déclencheurs : "empaquette cette vidéo", "ajoute des superpositions graphiques / tiers inférieurs / appels de données à ma présentation", "transforme cette interview en montage empaqueté avec graphiques".
/motion-graphics
- Entrée : Un court motion graphic axé sur le design où le mouvement est le message — généralement moins de ~10s, sans narration. Genres : typographie cinétique, un décompte statistique / numérique, un hit graphique, un logo sting, un tiers inférieur / superposition, ou une capture de page / tweet / titre basée sur une recherche.
- Résultat : un court motion graphic → MP4 ou une superposition transparente (alpha WebM / MOV) pour un tiers inférieur / appel.
- Déclencheurs : "un logo sting de 8s", "anime cette statistique", "une intro en typographie cinétique", "transforme ce tweet en motion graphic", "une superposition transparente de tiers inférieur".
/music-to-video
- Entrée : Une piste musicale — un fichier audio, ou une vidéo dont extraire l'audio — avec aucune narration et aucune capture de site web. Optionnellement, des images / vidéos fournies par l'utilisateur à intégrer. La piste est analysée une fois en une carte de beats / énergie déterministe (
audiomap.json) sur laquelle toute la vidéo est construite. - Résultat : une composition HyperFrames synchronisée sur le rythme → MP4 où la musique pilote le rythme. La typographie et les modèles constituent le socle (une vidéo complète n'a besoin d'aucune ressource) ; tout média fourni est coupé sur la même grille de beats (beat-cut / ken-burns). Le genre — vidéo lyrique, diaporama, promo cinétique — émerge des choix par image ; le pipeline ne bifurque jamais dessus.
- Déclencheurs : "fais une vidéo pour cette chanson", "vidéo synchronisée sur le rythme à partir de cette piste", "vidéo lyrique", "transforme cette musique en vidéo", "visualiseur musical / promo cinétique sur ce beat".
/slideshow
- Entrée : Une présentation / pitch deck / deck interactif à écrire — 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 slideshow HyperFrames ?" avant d'écrire.
- Résultat : une composition HyperFrames exécutable + un îlot JSON que le
SlideshowControllerdu lecteur lit pour transformer l'îlot en une navigation pilotée par diapositive — diapositives discrètes, fragments par clic, branchements, zones interactives, mode présentateur, présentation en ligne, export PDF. Pas une vidéo MP4.
[Le contenu original a été tronqué. Le reste du markdown doit être inclus dans la traduction si le texte source complet est fourni.]