Point d'entrée HyperFrames
HyperFrames rend une 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 des médias est gérée par le framework. Le contrat d'édition complet se trouve dans /hyperframes-core ; lisez-le avant d'écrire du HTML de composition.
1. Démarrer à partir de l'état du projet
Appliquer la première ligne correspondante ; ne pas évaluer les lignes d'état inférieures :
| État | Action |
|---|---|
| Port explicite d'une source Remotion existante vers HyperFrames | Lire references/routes/remotion-to-hyperframes.md, puis acheminer directement vers ce workflow. Ignorer 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 | Effectuer uniquement cette opération. Ignorer l'intention et le routage du workflow ; charger /hyperframes-cli et toute compétence de domaine requise. |
| Modification spécifique d'un projet existant | Effectuer la modification. Ne pas exécuter la couche d'intention. |
BRIEF.md existe | Lire workflow et flow. Exécuter ce workflow ; flow: companion s'exécute toujours dans /general-video. Ne pas poser de questions sur le brief. |
Pas de brief, mais hyperframes.json ou STORYBOARD.md existe | Reprendre à partir des fichiers du projet et des préférences enregistrées. Déduire le workflow propriétaire des artefacts existants. S'il ne peut pas être déterminé de manière unique, poser une seule question de routage ; ne pas exécuter l'entretien d'intention. |
| Création nouvelle | Exécuter la couche d'intention — references/intent-interview.md — puis acheminer une fois en utilisant le tableau de la § 2. |
Si une nouvelle demande n'identifie pas le sujet ou l'entrée, demander de quoi parle la vidéo avant de router. Vérifier les préférences et les recettes avant de poser une question (references/intent-interview.md, étape 1). Une entrée figma.com ou une recette nommée modifie la prise en charge, pas le routage — la section "Adapt orthogonal inputs" de l'entretien gère les deux.
Maintenir la CLI du projet à jour
Un projet scaffoldé fixe hyperframes@<version> dans ses scripts package.json pour que les rendus restent reproductibles ; la version fixe n'avance jamais d'elle-même, et une exécution avec une version fixe d'une CLI plus ancienne n'affiche aucun avertissement à ce sujet. Lors de la reprise d'un projet dont les scripts contiennent une version fixée, sonder une fois avant la première commande affectant le rendu :
npx hyperframes@latest upgrade --project . --check
La sonde est en lecture seule et signale la version fixée par rapport à la dernière version ; garder le . explicite — sur les anciennes versions de la CLI, un --project nu suivi d'un autre drapeau consomme ce drapeau comme valeur de répertoire. Lorsqu'elle 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 à version fixée) — appliquer avec npx hyperframes@latest upgrade --project ., puis vérifier avec npx hyperframes check. Un test réussi confirme que les compositions du projet sont toujours valides avec la nouvelle version — pas que la sortie rendue est identique à l'image près à l'ancienne version fixée — donc une mise à jour réussie n'est jamais silencieuse : nommer 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 le test échoue, annuler la modification du package.json, continuer avec la version fixée, et signaler quelle version le projet conserve et pourquoi. Agir sur le signal plutôt que de le transmettre à l'utilisateur ; ne jamais laisser une version fixée non vérifiée.
2. Router une nouvelle création
Utiliser la première ligne correspondante. Correspondre au livrable demandé, pas à un mot ou type de fichier mentionné incidemment.
| 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 à une séquence existante de type "tête parlante" sans la modifier | /embedded-captions |
| 4 | Ajouter des incrustations graphiques conçues à une séquence existante de type tête parlante, interview ou podcast, sans modifier la séquence | /talking-head-recut |
| 5 | Construire une vidéo synchronisée sur un morceau de musique, sans narration ni capture de site web | /music-to-video |
| 6 | Créer une unité explicitement courte, non narrée, axée sur le mouvement, généralement moins de 10 s | /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, un site produit, une application, ou une entreprise à partir d'une URL ou d'un bref spécifique au site | /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, lire 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 à la demande ne soient présentes) ainsi que l'entrée d'entretien de cette route. Si le candidat ne satisfait pas son contrat, continuer le routage plutôt que de forcer la correspondance. Lire uniquement le fichier de la route correspondante.
Résoudre les ambiguïtés courantes
- Un court titre animé, un logo sting, un hit statistique, un hit graphique, un hit cartographique, ou un tiers inférieur autonome relève de
/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 relève de/general-video. - Un motion graphic explicitement court peut utiliser une URL, un tweet, un article, ou une capture d'écran comme matériau source. Une demande générique "faire une vidéo à partir de ce site" relève de
/product-launch-video. - Des séquences existantes avec sous-titres sont routées vers
/embedded-captions; des séquences avec cartes d'information conçues sont routées vers/talking-head-recut. Remonter, réorganiser, recolorer, recadrer ou remixer des séquences est une édition personnalisée et tombe dans/general-video. - Un fichier audio sélectionne
/music-to-videouniquement lorsque sa grille rythmique pilote la pièce. La musique utilisée en fond sonore ne remplace pas le routage basé sur le sujet. - "Je veux un storyboard" modifie le processus de révision, pas le workflow. Sans autre signal de routage, utiliser
/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 supportent jusqu'à environ 3 minutes et sont les plus performants entre 30 et 90 s. Router une pièce clairement plus longue vers
/general-video. La longueur ne remplace jamais un port explicite, un deck, un sous-titre, une incrustation ou un livrable piloté par la musique.
3. Router une fois, puis quitter
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 de l'exécution, passation — et se termine en écrivant BRIEF.md. Le brief est le seul artefact de routage que le workflow lit ; rien plus tard ne rouvre ce skill ou l'entretien. Répondre à toute question ultérieure "qu'est-ce que la route exigeait ?" à partir de BRIEF.md.
4. Installer et entrer dans le workflow
Avant de lire le workflow sélectionné, l'installer ou le mettre à jour ainsi que les compétences de domaine de base :
npx hyperframes skills update <nom-du-workflow>
Utiliser le nom nu sans /. Si la commande échoue, signaler l'erreur ; ne pas reconstruire le workflow de mémoire. Tout le reste concernant l'installation — la division coeur/à-la-demande, ce que init rafraîchit, le diagnostic, l'exclusion CI, et le repli 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, blueprints 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 rythmique | /hyperframes-creative |
| Images, icônes, logos, audio, sous-titres, étalonnages, LUT, médias réutilisables | /media-use |
| Init, lint, check, snapshots, compare, rendu par lot, Studio, rendu, publier ou diagnostics | /hyperframes-cli |
| Blocs de registre et composants | /hyperframes-registry |
| Actifs Figma, tokens, composants ou trames de storyboard sous forme de mouvement reconstruit | /figma |
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 » : corriger une séquence
sombre/plate/ennuyeuse, styliser un clip, masquer un visage, ou améliorer une révélation média. Lire
../media-use/references/media-treatments.md avant de modifier un traitement ; il régit comment les séquences
sont traitées, jamais si les médias peuvent être utilisés. Ne pas substituer un LUT générique, un filtre/overlay CSS
ou une interpolation d'opacité à un primitif de traitement canonique existant. Garder les modifications
texte/layout/mouvement dans leur domaine propriétaire.
Pendant une construction avec des médias photographiques importants, inclure un scan
grounded de polish média dans la passe de qualité finale ; laisser des médias appropriés inchangés est
un résultat valide.
Les compétences de domaine ne prennent jamais possession du livrable de bout en bout. Charger uniquement ce dont le workflow actif a besoin.