Point d'entrée HyperFrames
HyperFrames rend la vidéo à 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 adressable, 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 HTML de la composition.
1. Partir de l'état du projet
Appliquez la première ligne correspondante ; n'évaluez pas les lignes d'état inférieures :
| State | Action |
|---|---|
| Port explicite d'une source Remotion existante vers HyperFrames | Lisez references/routes/remotion-to-hyperframes.md, puis dirigez-vous 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 lots | Effectuez uniquement cette opération. Ignorez l'intention et le routage de workflow ; chargez /hyperframes-cli et les compétences domaine requises. |
| 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 aucune question 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 à partir des artefacts existants. S'il ne peut être déterminé de manière unique, posez une seule question de routage ; n'exécutez pas l'interview d'intention. |
| Création originale | Exécutez la couche d'intention — references/intent-interview.md — puis effectuez le routage une fois à l'aide du tableau de la § 2. |
Si une demande originale n'identifie pas le sujet ou l'entrée, demandez de quoi parle la vidéo avant de router. 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'admission, pas le routage — la section "Adaptation des entrées orthogonales" de l'interview gère les deux.
Maintenir le CLI du projet à jour
Un projet initialisé épingle hyperframes@<version> dans les scripts de son package.json pour que les rendus restent reproductibles ; l'épingle n'avance jamais toute seule, et une exécution épinglée d'un ancien CLI n'affiche aucun avertissement à ce sujet. Lors de la reprise d'un projet dont les scripts portent une épingle, 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 l'épingle par rapport à la dernière version ; gardez le . explicite — sur les anciennes versions du CLI, un --project nu suivi d'un autre drapeau consomme ce drapeau comme valeur de son répertoire. Lorsqu'elle signale que le projet est en retard — ou si la sortie CLI le montre déjà (le message stderr This project pins hyperframes@… (latest …), ou _meta.updateAvailable: true dans un résultat --json depuis un script épinglé) — 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'ancienne épingle — donc un bump réussi n'est jamais silencieux : nommez l'ancienne et la nouvelle version dans le résumé 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 sur la version épinglée, et indiquez sur quelle version le projet reste et pourquoi. Agissez sur le signal plutôt que de le relayer à l'utilisateur ; ne laissez jamais une épingle bumpée non vérifiée.
2. Router une création originale
Utilisez la première ligne correspondante. Faites correspondre le livrable demandé, pas un mot ou un type de fichier mentionné au passage.
| 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 sous-titres ou légendes simples à des images de tête parlante existantes sans les modifier | /embedded-captions |
| 4 | Ajouter des superpositions graphiques conçues à des images de tête parlante, interview ou podcast sans modifier les images | /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, typiquement moins de 10s | /motion-graphics |
| 7 | Expliquer une pull request GitHub ou un changement de code à partir d'une référence PR | /pr-to-video |
| 8 | Commercialiser ou présenter un site web, site produit, application ou entreprise à partir d'une URL ou d'un brief spécifique | /product-launch-video |
| 9 | Expliquer un sujet, un article ou des notes avec des visuels inventés et sans 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 d'entrée/sortie/déclencheur (disponible avant que les compétences de workflow installées à la demande soient présentes) plus le point d'entrée de l'interview pour cette route. Si le candidat ne remplit 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 sting de logo, un hit de statistique, un hit de graphique, un hit de carte, ou un tiers-inférieur autonome est
/motion-graphicslorsqu'il est sans narration et que le mouvement est le message. Une carte-titre statique, une séquence narrée, un montage plus long ou une boucle personnalisée relèvent de/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 "fais une vidéo de ce site" relève de
/product-launch-video. - Des images existantes avec des légendes sont routées vers
/embedded-captions; des images avec des fiches d'information conçues sont routées vers/talking-head-recut. Remanier le timing, réordonner, recolorer, recadrer ou remixer des images est un montage personnalisé et tombe sous/general-video. - Un fichier musical sélectionne
/music-to-videouniquement lorsque sa grille rythmique pilote la pièce. Une musique utilisée comme fond sonore ne remplace pas la route déterminée par le 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 optimaux autour de 30 à 90 secondes. Routez une pièce clairement plus longue vers
/general-video. La longueur ne remplace jamais un portage explicite, un deck, des légendes, un overlay ou un livrable piloté par la musique.
3. Router une fois, puis laisser
Pour une création originale, la couche d'intention (references/intent-interview.md) mène la conversation complète — mémoire, triage, tour de pitch, indispensables, forme de l'exécution, passation — et se termine par l'écriture de BRIEF.md. Le brief est le seul artefact de routage que le workflow lit ; rien par la suite ne rouvre ce skill ou l'interview. Répondez à toute question ultérieure "qu'a exigé 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 domaine de base :
npx hyperframes skills update <workflow-name>
Utilisez le nom nu sans /. Si la commande échoue, remontez l'erreur ; ne reconstruisez pas le workflow de mémoire. Tout le reste de l'installation — la division core/lazy, ce que init rafraîchit, le diagnostic, le désistement CI, et la solution de repli sans CLI — se trouve dans references/skill-lifecycle.md.
5. Charger les compétences 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 runtime | /hyperframes-animation |
GSAP sûr pour la recherche, CSS, Anime.js, WAAPI, FLIP, chemins, masques, SVG, images clés 3D, ou diagnostics hyperframes keyframes | /hyperframes-keyframes |
| Spécifications de design, concept, palette, typographie, narration, planification du rythme | /hyperframes-creative |
| Images, icônes, logos, audio, légendes, corrections, 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, check, instantanés, comparaison, rendu par lots, Studio, rendu, publication ou diagnostics | /hyperframes-cli |
| Blocs et composants du registre | /hyperframes-registry |
| Actifs Figma, tokens, composants ou images de storyboard en tant que mouvement reconstruit | /figma |
Les retours généraux sur l'apparence ou le comportement des médias photographiques sont également routés vers
/media-use, même si l'utilisateur ne dit jamais "étalonnage" ou "effet" : corriger
une séquence sombre/plate/ennuyeuse, styliser un clip, cacher un visage ou améliorer une
révélation de média. Lisez ../media-use/references/media-treatments.md avant de modifier un
traitement ; ce fichier régit la manière dont les images sont traitées, jamais si les médias peuvent être
utilisés. Ne substituez pas une LUT générique, un filtre/superposition CSS ou une interpolation d'opacité à
une primitive de traitement canonique existante. Gardez les modifications uniquement textuelles/disposition/mouvement dans
leur domaine propriétaire.
Lors d'une construction avec des médias photographiques importants, incluez une analyse de polissage média
ancrée dans le dernier contrôle qualité ; laisser les médias appropriés inchangés est un
résultat valide.
Les compétences domaine ne prennent jamais possession du livrable de bout en bout. Chargez uniquement ce dont le workflow actif a besoin.