Point d'entrée HyperFrames
HyperFrames génère des vidéos à partir de HTML — une composition est un fichier HTML dont le DOM déclare le timing à l'aide d'attributs data-*, dont le runtime d'animation est seekable et dont la lecture multimédia est gérée par le framework. Le contrat complet d'autorat se trouve dans /hyperframes-core ; lisez-le avant d'écrire le HTML de la composition.
1. Commencer à partir de l'état du projet
Appliquez la première ligne correspondante ; n'évaluez pas les lignes d'état inférieures :
| État | Action |
|---|---|
| Port explicite d'une source Remotion existante vers HyperFrames | Lisez references/routes/remotion-to-hyperframes.md, puis acheminez directement vers ce workflow. Ignorez la couche d'intention. |
| Opération spécifique sur un projet HyperFrames existant : inspecter, diagnostiquer, valider, prévisualiser, rendre, publier ou effectuer un rendu par lot | Effectuez uniquement cette opération. Ignorez l'intention et le routage du workflow ; chargez /hyperframes-cli et les compétences de domaine nécessaires. |
| Modification spécifique d'un projet existant | Effectuez la modification. N'exécutez pas la couche d'intention. |
BRIEF.md existe | Lisez workflow et flow. Exécutez ce workflow ; flow: companion s'exécute toujours dans /general-video. Ne posez pas de questions de brief. |
Pas de brief, mais hyperframes.json ou STORYBOARD.md existe | Reprenez à partir des fichiers du projet et des préférences enregistrées. Déduisez le workflow propriétaire des artefacts existants. S'il ne peut pas être déterminé de manière unique, posez une seule question de routage ; n'exécutez pas l'entretien d'intention. |
| Nouvelle création | Exécutez la couche d'intention — references/intent-interview.md — puis acheminez une fois en utilisant le tableau de la § 2. |
Si une nouvelle demande n'identifie pas le sujet ou l'entrée, demandez de quoi parle la vidéo avant d'acheminer. Vérifiez les préférences et les recettes avant de demander quoi que ce soit (references/intent-interview.md, étape 1). Une entrée figma.com ou une recette nommée modifie l'entrée, pas le routage — la section "Adapter les entrées orthogonales" de l'entretien gère les deux.
Maintenir la CLI du projet à jour
Un projet initialisé verrouille hyperframes@<version> dans ses scripts package.json pour que les rendus restent reproductibles ; le verrouillage n'évolue jamais tout seul, et une exécution verrouillée d'une CLI plus ancienne n'affiche aucun avertissement à ce sujet. Lors de la reprise d'un projet dont les scripts portent un verrouillage, sondez une fois avant la première commande affectant le rendu :
npx hyperframes@latest upgrade --project . --check
La sonde est en lecture seule et signale le verrouillage par rapport à la dernière version ; gardez le . explicite — sur les anciennes versions de la CLI, un --project nu suivi d'un autre indicateur consomme cet indicateur comme valeur de répertoire. Lorsqu'il signale que le projet est en retard — ou que toute sortie de la CLI l'indique déjà (l'avis stderr This project pins hyperframes@… (latest …), ou _meta.updateAvailable: true dans un résultat --json d'un script verrouillé) — appliquez avec npx hyperframes@latest upgrade --project ., puis vérifiez avec npx hyperframes check. Une vérification réussie confirme que les compositions du projet sont toujours valides sur la nouvelle version — pas que la sortie rendue est identique image par image à l'ancien verrouillage — donc une mise à jour réussie n'est jamais silencieuse : nommez l'ancienne et la nouvelle version dans le récapitulatif de l'exécution. Un projet sans composition n'a pas besoin de vérification. Si la vérification échoue, annulez la modification du package.json, continuez avec la version verrouillée et signalez la version sur laquelle le projet reste et pourquoi. Agissez sur le signal plutôt que de le relayer à l'utilisateur ; ne laissez jamais un verrouillage mis à jour sans vérification.
2. Acheminer une nouvelle création
Utilisez la première ligne correspondante. Faites correspondre le livrable demandé, pas un mot ou un type de fichier mentionné en passant.
| Priorité | Demande | Workflow |
|---|---|---|
| 1 | Porter explicitement une source Remotion existante | /remotion-to-hyperframes |
| 2 | Créer une présentation, un pitch deck ou un deck interactif navigable | /slideshow |
| 3 | Ajouter des légendes ou sous-titres simples à des séquences d'interview existantes sans les modifier | /embedded-captions |
| 4 | Ajouter des superpositions graphiques conçues à des séquences d'interview, d'entrevue ou de podcast existantes sans modifier les séquences | /talking-head-recut |
| 5 | Construire une vidéo synchronisée sur le rythme à partir d'une piste musicale, sans narration ni capture de site Web | /music-to-video |
| 6 | Créer une unité explicitement courte, sans narration, axée sur le mouvement, généralement de moins de 10 s | /motion-graphics |
| 7 | Expliquer une pull request GitHub ou une modification de code à partir d'une référence PR | /pr-to-video |
| 8 | Commercialiser ou présenter un site Web, un site produit, une application ou une entreprise à partir d'une URL ou d'un brief spécifique au site | /product-launch-video |
| 9 | Expliquer un sujet, un article ou des notes avec des visuels inventés et aucune capture de produit ou de site | /faceless-explainer |
| 10 | Toute autre vidéo ou composition personnalisée | /general-video |
Avant de finaliser le routage, lisez references/routes/<workflow>.md — un petit fichier par route : le contrat canonique entrée/sortie/déclencheur (disponible avant que les compétences de workflow installées paresseusement ne soient présentes) plus l'entrée d'entretien de cette route. Si le candidat ne satisfait pas son contrat, continuez le routage au lieu de forcer la correspondance. Lisez uniquement le fichier de la route correspondante.
Résoudre les ambiguïtés courantes
- Un titre animé court, un logo sting, un hit de statistique, un hit de graphique, un hit de carte ou un tiers inférieur autonome est
/motion-graphicslorsqu'il n'est pas narré et que le mouvement est le message. Un titre statique, une séquence narrée, un montage plus long ou une boucle personnalisée est/general-video. - Un motion graphic explicitement court peut utiliser une URL, un tweet, un article ou une capture d'écran comme matériel source. Une demande générique "faire une vidéo à partir de ce site" est
/product-launch-video. - Les séquences existantes avec légendes sont acheminées vers
/embedded-captions; les séquences avec des cartes d'information conçues sont acheminées vers/talking-head-recut. Le ré-étalonnage, le réordonnancement, le recoloriage, le recadrage ou le remixage des séquences est une édition personnalisée et tombe dans/general-video. - Un fichier musical sélectionne
/music-to-videouniquement lorsque sa grille de rythme entraîne la pièce. La musique utilisée en fond sonore ne remplace pas la route correspondant au sujet. - "Je veux un storyboard" modifie le processus de révision, pas le workflow. Sans autre signal de routage, utilisez
/general-video. Un storyboard esquissé confirmé peut lui-même être le livrable demandé ; la boucle de révision définit ce point d'arrêt. - Les workflows narratifs spécialisés prennent en charge jusqu'à environ 3 minutes et sont les plus forts autour de 30 à 90 s. Acheminez une pièce clairement plus longue vers
/general-video. La longueur ne remplace jamais un port explicite, un deck, une légende, une superposition ou un livrable piloté par la musique.
3. Acheminer une fois, puis laisser
Pour une nouvelle création, la couche d'intention (references/intent-interview.md) exécute la conversation complète — mémoire, triage, tour de pitch, incontournables, forme d'exécution, transfert — et se termine en écrivant BRIEF.md. Le brief est le seul artefact de routage que le workflow lit ; rien plus tard ne rouvre cette compétence ou l'entretien. Répondez à chaque question ultérieure "que demandait la route ?" à partir de BRIEF.md.
4. Installer et entrer dans le workflow
Avant de lire le workflow sélectionné, installez-le ou mettez-le à jour ainsi que les compétences de domaine principales :
npx hyperframes skills update <nom-du-workflow>
Utilisez le nom nu sans /. Si la commande échoue, affichez l'erreur ; ne reconstruisez pas le workflow de mémoire. Tout le reste concernant l'installation — la division core vs lazy, ce que init rafraîchit, le diagnostic, l'exclusion CI et la solution de secours sans CLI — se trouve dans references/skill-lifecycle.md.
5. Charger les compétences de domaine à la demande
| Besoin | Compétence |
|---|---|
| Structure de composition, attributs de timing, pistes, variables, déterminisme | /hyperframes-core |
| Règles de mouvement, plans de scène, transitions, adaptateurs d'exécution | /hyperframes-animation |
GSAP seek-safe, CSS, Anime.js, WAAPI, FLIP, chemins, masques, SVG, images clés 3D ou diagnostics hyperframes keyframes | /hyperframes-keyframes |
| Spécifications de conception, concept, palette, typographie, narration, planification du rythme | /hyperframes-creative |
| Images, icônes, logos, audio, légendes, grades, LUT, médias réutilisables | /media-use |
| Découpage de voix off, chaînes d'effets audio ou enveloppes d'automatisation sur une piste | /hyperframes-audio |
| Init, lint, vérification, instantanés, comparaison, rendu par lot, Studio, rendu, publication ou diagnostics | /hyperframes-cli |
| Blocs et composants du registre | /hyperframes-registry |
| Actifs Figma, jetons, composants ou images de storyboard en tant que mouvement reconstruit | /figma |
Les phrases d'édition de créateur sont des demandes cross-domaine. Chargez chaque compétence nommée dans la ligne correspondante :
| Demande du créateur | Domaines requis |
|---|---|
| "couper cette séquence", coupe franche, rogner, épisser, réordonner ou utiliser une plage source | /general-video + /hyperframes-core ; core possède data-start, data-duration, data-media-start et la disposition des pistes. |
| zoomer ici, punch-in / punch-out, zoom multi-état fluide ou recadrage, Ken Burns, ou mouvement de caméra | /general-video + /hyperframes-core + /hyperframes-keyframes ; animez l'enveloppe visuelle/de recadrage interne, pas le clip minuté. |
| coupe par correspondance ou transition caméra whip pan | /general-video + /hyperframes-animation + /hyperframes-keyframes + /hyperframes-registry ; recherchez/installez une primitive de transition avant de créer manuellement. |
| fondu, fondu enchaîné, gain/volume de piste, automatisation, duck/carve ou effets audio | /general-video + /hyperframes-core + /hyperframes-audio ; core place les clips, l'audio mixe les pistes placées. |
| montages image et son qui combinent des coupes avec un mouvement de caméra ou un mixage | /general-video + /hyperframes-core + /hyperframes-keyframes lorsqu'il y a un mouvement visuel + /hyperframes-audio lorsque le son est fondu, mixé, ducké, automatisé ou traité. |
| sourcer ou générer des médias, ou prétraiter un ralentissement/arrêt intra-source non pris en charge | /media-use ; sourçage/génération/prétraitement uniquement, jamais de mixage de piste placée. |
data-playback-rate constant est sûr pour le rendu des images et du son à hauteur préservée. Il ne rend pas les ralentissements de source image-cléables ; prétraitez les ralentissements. Pour les contrats d'édition copiables, chargez /hyperframes-core → references/creator-editing-recipes.md.
Les retours généraux sur l'apparence ou le comportement des médias photographiques sont également acheminés vers /media-use, même si l'utilisateur ne dit jamais "étalonnage" ou "effet".