HyperFrames — commencez 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 par scrutation, 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 workflow pour toute demande "fais-moi un…" — généralement une vidéo, mais aussi un deck navigable ou une composition portée). La séparation est basée sur la propriété, pas le type de sortie : un workflow possède un livrable de bout en bout (son propre répertoire de projet, des étapes gardées, des sous-agents, un artefact final) ; une compétence de domaine est une couche de capacité qu'un workflow intègre en cours de route et qui ne possède jamais la tâche.
Carte des capacités — les compétences du domaine
Capacités atomiques que vous chargez à la demande — ce ne sont pas des workflows complets ; elles ne possèdent jamais la tâche de bout en bout. Pour les demandes "fais-moi un…", utilisez le routeur d'intention ci-dessous.
| Vous voulez… | Compétence |
|---|---|
Créer / éditer une composition HTML — le contrat data-*, les clips, les pistes, les sous-compositions, les variables | /hyperframes-core |
| Animer — mouvement atomique, plans de scène, transitions, adaptateurs runtime (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | /hyperframes-animation |
Créer des images clés sûres pour la scrutation — timelines GSAP, images clés CSS, Anime.js, WAAPI, FLIP, chemins, masques, morphing/dessin SVG, profondeur 3D, plus les diagnostics hyperframes keyframes | /hyperframes-keyframes |
Direction créative — frame.md / design.md, palettes, typographie, narration, planification des beats, réactivité audio | /hyperframes-creative |
| Média — résoudre/générer BGM, SFX, image, icône, logo de marque, voix, étalonnage, LUT ; voix off TTS, transcription, suppression d'arrière-plan, sous-titres ; réutilisation inter-projets | /media-use |
| Boucle de développement CLI — init, lint, validate, inspect, preview, render, publish, doctor | /hyperframes-cli |
Installer des blocs / composants du registre (hyperframes add) | /hyperframes-registry |
| Importer du contenu Figma — assets, tokens, composants, storyboards → mouvement reconstruit (REST/CLI) ; Motion (MCP), shaders (MCP source / export natif) | /figma |
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 compétences du domaine ci-dessus.
Avant de router — 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 asset), 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 ?
- Source Figma — si l'entrée est une URL figma.com,
/figmaextrait d'abord les assets/tokens/(composants/storyboard), quel que soit le workflow ci-dessous choisi pour la forme de la vidéo ; ce workflow construit ensuite à partir de la sortie de/figma— jamais en pilotant Figma directement via les outils MCP bruts (cela contourne la sanitisation SVG, la provenance et la liaison des tokens de marque).
Mode — si la requête porte un signal autonome continu ("surprends-moi", "décide pour moi", "construis-le simplement"), notez-le et transmettez-le au workflow : l'ensemble du déroulement devient autonome et aucune étape ultérieure ne redemande. Sans signal, le workflow demande le mode comme première question de son brief. La valeur par défaut est collaboratif. (/motion-graphics est autonome par conception.) Sémantique : hyperframes-core → references/brief-contract.md.
Valeurs par défaut du cahier des charges — déclarez, ne demandez pas (elles ne changent jamais la route) : l'aspect dérive de la destination — fil social (X / LinkedIn / Instagram) → carré 1:1, TikTok / Reels / Shorts → 9:16, YouTube / intégration / inconnu → 16:9 ; la langue de la narration / des sous-titres = celle de l'utilisateur. Le workflow choisi reconfirme ses propres spécificités à sa première étape (sémantique des champs : hyperframes-core → references/brief-contract.md).
Aide-mémoire des workflows
| Workflow | À utiliser pour |
|---|---|
/product-launch-video | Vendre un produit (SaaS, application, site entreprise / produit) — à partir d'une URL, d'un brief ou d'un script → une promotion. La valeur par défaut pour toute URL commerciale, même si seul le site est nommé. |
/website-to-video | Montrer un site lui-même — une visite / démonstration construite à partir des propres captures d'écran du site. Pour les sites non commerciaux (portfolio, blog, documentation, personnel, événement), ou lorsque l'utilisateur veut une visite guidée, pas une promotion. |
/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 → un journal des modifications / une révélation de fonctionnalité / un correctif / un explicateur de refactorisation |
/embedded-captions | Ajouter des sous-titres / légendes à une vidéo existante avec une personne qui parle (sans toucher aux images) |
/talking-head-recut | Emballer une vidéo existante avec une personne qui parle avec des incrustations graphiques conçues — tiers inférieurs, cartes de données, titres cinétiques, citations encadrées |
/motion-graphics | Un court métrage (environ moins de 10s), sans narration, où le mouvement est le message — typographie cinétique, un hit de statistique / graphique, un sting de logo, une carte animée, un tweet / titre animé, un tiers inférieur / incrustation autonome (MP4 ou alpha transparent) |
/music-to-video | Une piste musicale → une vidéo synchronisée sur le rythme — vidéo lyrique, diaporama ou promotion cinétique ; la musique pilote 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, branchements, 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 / affiche statique, 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 confondable) :
- Axé sur le mouvement et sans narration (moins d'environ 10s, le mouvement est le message) →
/motion-graphics, quel que soit le type d'entrée. - Une URL ou un script — demandez une chose : le site vend-il un produit ? Oui (SaaS / application / produit / site entreprise) →
/product-launch-video— une promotion, et la valeur par défaut pour toute URL commerciale même si seul le site est nommé. Non, ou l'utilisateur veut simplement que le site soit montré tel quel (portfolio / blog / documentation / personnel / événement) →/website-to-video— une visite guidée. Un lien PR GitHub →/pr-to-video; un concept sans produit ni site →/faceless-explainer. - Séquence existante — sous-titres simples de parole →
/embedded-captions; cartes incrustées conçues →/talking-head-recut. Aucun des deux n'édite la séquence elle-même (ré-échantillonnage / recoloration / recadrage / réorganisation / audio est un 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 pilotent le rythme. (Les pièces avec narration restent dans le workflow correspondant à l'entrée ci-dessus ;/motion-graphicsest pour les animations courtes sans narration qui ne sont pas musicales.) - 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 "slideshow" est traitée directement ; un déclencheur adjacent ("deck / slides / presentation / convert this page") fait confirmer à/slideshowqu'il s'agit bien d'un diaporama avant de créer, 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 ; n'allez vers
/general-videoque lorsque le morceau est clairement plus long qu'environ 3 min, ou s'il s'agit d'un format statique / en boucle / personnalisé.
Après avoir choisi — garantissez que le workflow est installé
Une fois que vous avez choisi un workflow, exécutez l'étape de mise à jour avant de lire sa compétence — les compétences de workflow s'installent à la demande, donc celle que vous avez sélectionnée peut ne pas être encore sur cette machine (ses phrases de déclenchement se trouvent dans ce routeur précisément pour vous permettre d'acheminer vers des compétences qui ne sont pas installées) :
npx hyperframes skills update <nom-du-workflow>
Nom simple, sans le / de début — par ex. npx hyperframes skills update pr-to-video. Nommer une compétence garantit qu'elle ainsi que les compétences de domaine principales dont tout workflow dépend sont installées et à jour : un no-op rapide quand tout est déjà fait, une installation ciblée des seules compétences manquantes/obsolètes sinon — jamais l'ensemble complet. Lisez ensuite la compétence du workflow et continuez. La même commande fonctionne pour une compétence de domaine à la demande depuis la carte des capacités (par ex. npx hyperframes skills update figma).
Si la commande échoue, signalez son erreur à l'utilisateur au lieu d'improviser le workflow de mémoire. Solution de secours manuelle (pas de CLI HyperFrames disponible) : npx skills add heygen-com/hyperframes --skill <nom-du-workflow> ; tout en une fois : npx skills add heygen-com/hyperframes --all.
Maintenir les compétences à jour
Les compétences HyperFrames sont versionnées et s'installent paresseusement : l'ensemble principal de manière proactive, les workflows à la première utilisation.
- Ensemble principal — ce routeur, les compétences de domaine
hyperframes-*, etmedia-use.npx hyperframes init(que tout workflow de création exécute lors de l'échafaudage) vérifie GitHub et rafraîchit l'ensemble principal ainsi que tout ce qui est déjà installé. Il n'élargit jamais l'installation — les compétences de workflow que vous n'avez pas utilisées ne sont pas récupérées. Ré-exécuter init sur une machine à jour est un no-op ; hors ligne (ou limité en taux) il se dégrade gracieusement et n'échoue jamais durement. Le drapeau--skip-skillsest actuellement neutralisé (une mesure temporaire pendant que le registre skills.sh rattrape son retard) ; les CI/tests se désistent via la variable d'environnementHYPERFRAMES_SKIP_SKILLS=1. - Compétences de workflow — installées et rafraîchies au moment du déclenchement par l'étape de mise à jour ci-dessus (
skills update <nom-du-workflow>).
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 avec un code non nul lorsque quelque chose d'installé est obsolète ou que l'ensemble principal est incomplet — les compétences de workflow non encore installées sont signalées comme disponibles à la demande, pas comme un échec). - Mettre à jour :
npx hyperframes skills update— rafraîchit l'ensemble principal ainsi que tout ce qui est installé vers la dernière version, et supprime les compétences qui ne sont plus publiées. Sans noms, il n'installe jamais de workflows que vous n'avez pas utilisés ; nommer des compétences (skills update <nom…>) les installe en plus. - Ensemble complet, explicitement :
npx hyperframes skills(ounpx skills add heygen-com/hyperframes --all).
Le 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 workflows
/product-launch-video
- Entrée : Un produit en cours de commercialisation — (a) une URL du produit (explorée avec Chrome sans tête pour les assets + les tokens de marque), (b) un script / brief qui nomme le site du produit même sans lien (PLV le résout + l'explore, sauf si l'utilisateur s'y oppose), ou (c) un script sans site dérivable / "pas de raclage" (mode sans capture — choisissez un préréglage de style qui fournit une palette + un système de design). Un script fourni peut être la voix off textuelle ou restructurée par scène — PLV demande.
- Sortie : une promotion 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 guidée du site, utilisez
/website-to-video. - Déclencheurs : "vidéo de lancement pour X", "promotion pour notre site", "explique mon SaaS en une minute", "transforme mon script en une promotion de 60s", "texte…
…
[tronqué pour la traduction]