HyperFrames — commencer ici
HyperFrames génère des vidéos à 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 de création complet se trouve dans /hyperframes-core ; lisez-le avant d'écrire le code 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 flux de travail pour toute demande "faites-moi une vidéo").
Carte des capacités — les compétences du domaine
Capacités atomiques que vous chargez à la demande — pas des flux de travail complets. Pour "faites-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, 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édia — voix off TTS, musique de fond, transcription, suppression d'arrière-plan, sous-titres | /hyperframes-media |
Résolution média — trouver + geler BGM, SFX, images, icônes du catalogue HeyGen dans .media/ avec suivi du manifeste | /media-use |
| Boucle de dev CLI — init, lint, valider, inspecter, prévisualiser, rendre, publier, diagnostiquer | /hyperframes-cli |
Installer des blocs / composants de registre (hyperframes add) | /hyperframes-registry |
Routage d'intention — choisir un flux de travail
Cette section ne connaît que les flux de travail de haut niveau ; elle ne charge pas leurs références internes ni les compétences du domaine ci-dessus.
Avant le routage — confirmer l'entrée, pas le cahier des charges
Le routage doit savoir de quoi parle la vidéo — son entrée et son sujet. Si cela n'est pas spécifié ("faites une vidéo sur notre truc" sans URL, produit, sujet ou ressource), demandez avant d'entrer dans un flux de travail — s'engager sur un flux de travail 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 ?
Valeurs par défaut du cahier des charges — indiquez, 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 flux de travail choisi confirme ses propres spécificités à sa première étape.
Aide-mémoire des flux de travail
| Workflow | À utiliser pour |
|---|---|
/product-launch-video | Commercialiser / lancer / promouvoir un produit — à partir de son URL, d'un brief ou d'un script (même si le site est seulement nommé) |
/website-to-video | Transformer un site web général en vidéo — visite du site, vitrine de portfolio / page d'accueil, clip social à partir des visuels du site |
/faceless-explainer | Expliquer un sujet / concept à partir d'un 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 / refactoring explicateur |
/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 incrustations graphiques conçues — tiers inférieurs, points de données, titres animés, citations en exergue |
/motion-graphics | Un court graphisme animé, sans narration, axé sur le design — typographie animée, un statistique / graphique, un logo sting, une incrustation en tiers inférieur |
/music-to-video | Une piste musicale → une vidéo synchronisée sur le rythme — vidéo lyrique, diaporama ou promotion animée ; la musique dicte le rythme (images / vidéos utilisateur optionnelles coupées sur la grille de beats) |
/slideshow | Une présentation / pitch deck / deck interactif — diapositives distinctes, fragments, branchements, points chauds ; 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 / 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ù c'est ambigu) :
- Animation d'abord et sans narration (moins de ~10s, l'animation est le message) →
/motion-graphics, quel que soit l'entrée. - Une URL ou un script — commercialise un produit spécifique (même en nommant simplement le site) →
/product-launch-video; un site général non produit →/website-to-video; un lien de PR GitHub →/pr-to-video; explique un concept sans produit / site →/faceless-explainer. Vraiment ambigu produit-vs-sujet, ou lancement-vs-site-général → poser une question. - Séquence existante — sous-titres simples de paroles →
/embedded-captions; cartes d'incrustation conçues →/talking-head-recut. Aucun des deux ne modifie la séquence elle-même (remplacer le timing / recolorier / recadrer / réordonner / audio est du montage NLE — hors de portée). - Une piste musicale est l'entrée (un fichier audio, ou une vidéo pour en extraire l'audio) avec aucune narration →
/music-to-video— les beats/énergie de la musique dictent le rythme. (Les pièces narrées restent avec le flux de travail correspondant à l'entrée ci-dessus ;/motion-graphicsest pour les animations courtes sans narration qui ne sont pas basées sur la musique.) - Une présentation / pitch deck / deck interactif (diapositives distinctes, navigation, mode présentateur) →
/slideshow— la sortie est un deck navigable, pas une vidéo rendue. Une demande explicite de "diaporama" va directement ; un déclencheur adjacent ("deck / diapositives / présentation / convertir cette page") fait confirmer par/slideshowqu'il s'agit d'un diaporama avant la création, et passer au flux de travail non-diaporama approprié sinon. - La durée est un guide, pas une barrière — l'intention choisit le flux de travail ; allez vers
/general-videouniquement lorsque la pièce est clairement plus longue que ~3 minutes, ou est un format statique / en boucle / personnalisé.
Si le flux de travail correspondant n'est pas installé
Une fois que vous avez choisi un flux de travail, vérifiez qu'il vous est réellement disponible. Si la compétence du flux de travail correspondant n'est pas installée, ne retombez pas sur des suppositions — dites à l'utilisateur de l'installer d'abord :
- Juste ce flux de travail :
npx skills add heygen-com/hyperframes --skill <nom-du-workflow>(par exemple--skill pr-to-video— nom simple, sans/au début). - Tous les flux de travail à la fois :
npx skills add heygen-com/hyperframes --all(core + chaque flux de travail, ignore le sélecteur).
Après qu'il l'ait exécuté, relisez la compétence du flux de travail 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 lorsque 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 sans effet). La vérification est un aller-retour rapide vers GitHub ; hors ligne (ou limité en taux) il retombe sur l'installation après un court délai d'attente, donc init n'échoue jamais définitivement sur un hoquet réseau. Désactivez entièrement avec init --skip-skills.
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 lorsque quelque chose est obsolète ou manquant). - Mettre à jour :
npx hyperframes skills update— récupère l'ensemble complet jusqu'à la dernière version, en installant tout ce qui n'est pas encore présent (identique à l'étape d'installation de init).
La CLI affiche également un rappel d'une ligne lorsqu'une exécution de render / lint / validate détecte des compétences obsolètes.
Détails des flux de travail
/product-launch-video
- Entrée : Un produit en cours de commercialisation — (a) une URL de produit (explorée avec Chrome headless pour les ressources + les jetons 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 scraper" (mode sans capture — choisissez un préréglage de style qui fournit une palette + un système de conception). Un script fourni peut être la voix off textuelle ou restructurée par scène — PLV demande.
- Sortie : lancement de produit / promotion SaaS en tant que composition HyperFrames → MP4. (zone idéale 30–90s).
- Déclencheurs : "vidéo de lancement pour X", "promotion pour notre site", "expliquez mon SaaS en une minute", "transformez mon script en une promo de 60s", "vidéo de lancement texte uniquement, ne scrapez pas".
/website-to-video
- Entrée : Un site web général / URL à transformer en vidéo — lorsque l'objectif est une vidéo du site, pas un lancement de produit. Capturé avec Chrome headless pour des captures d'écran réelles + des ressources de marque.
- Sortie : une visite du site / portfolio / vitrine de page d'accueil / clip social construit à partir des propres visuels du site → MP4.
- Déclencheurs : "transformez ce site web en vidéo", "visite du site à partir de ", "clip social de notre page d'accueil", "j'ai juste une URL — créez quelque chose".
/faceless-explainer
- Entrée : Texte arbitraire — un sujet, un article ou des notes — en cours d'explication, sans produit commercialisé et sans site à capturer. (Issu de
/product-launch-video; pas de Chrome headless.) - Sortie : vidéo explicative sans visage → MP4, chaque visuel inventé par LLM par scène (typographie / schéma / diagramme / visualisation de données) ; fournit le préréglage
pin-and-paper. (zone idéale 30–90s). - Déclencheurs : "vidéo explicative sans visage sur X", "expliquez comment fonctionne DNS en vidéo", "transformez cet article en vidéo explicative", "vidéo explicative à 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). - Sortie : vidéo explicative de modification de code (journal des modifications / révélation de fonctionnalité / correctif / refactoring) → MP4 — surlignage des différences, avant/après, arborescence de fichiers + scènes d'impact. ≤ (zone idéale 30–90s).
- Déclencheurs : "faites une vidéo sur cette PR", "transformez la PR #1187 en vidéo de journal des modifications", "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) de sorte que le sujet puisse masquer les sous-titres.
- Sortie : la même séquence non modifiée, avec une couche de sous-titres — Standard (bandeau textuel en tiers inférieur + un point culminant intégré derrière le sujet) ou Cinématographique (chaque sous-titre composé derrière le sujet). Toute durée.
- Déclencheurs : "ajouter 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) à emballer avec des graphiques à l'écran — séquence réelle. Transcrite localement (Whisper). Le clip est lu en entier en dessous, non modifié.
- Sortie : la même séquence avec des cartes d'incrustation graphique minutées — titres animés, tiers inférieurs, points de données, citations en exergue, panneaux latéraux, incrustation d'image dans l'image — synchronisées sur la transcription. Toute durée.
- Déclencheurs : "emballer cette vidéo", "ajouter des incrustations graphiques / tiers inférieurs / points de données à ma conférence", "transformez cette interview en un montage avec emballage graphique".
/motion-graphics
- Entrée : Un court graphisme animé axé sur le design où l'animation est le message — typiquement moins de ~10s, aucune narration. Genres : typographie animée, un comptage de statistique/nombre, un graphique, un logo sting, un tiers inférieur / incrustation, ou un plan de page / tweet / titre basé sur une recherche.
- Sortie : un court graphisme animé → MP4 ou une incrustation transparente (alpha WebM / MOV) pour un tiers inférieur / un point d'appel.
- Déclencheurs : "un logo sting de 8s", "animer cette statistique", "une intro de typographie animée", "transformez ce tweet en graphisme animé", "une incrustation transparente en tiers inférieur".
/music-to-video
- Entrée : Une piste musicale — un fichier audio, ou une vidéo pour en 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. - Sortie : une composition HyperFrames synchronisée sur le rythme → MP4 où la musique dicte le rythme. La typographie et les modèles sont 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, promotion animée — émerge des choix par image ; le pipeline ne bifurque jamais dessus.
- Déclencheurs : "faites une vidéo pour cette chanson", "vidéo synchronisée sur le rythme à partir de cette piste", "vidéo lyrique", "transformez cette musique en vidéo", "visualiseur musical / promotion animée sur ce rythme".
/slideshow
- Entrée : Une présentation / pitch deck / deck interactif à créer
…
[tronqué pour la traduction]