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 accessible, et dont la lecture multimédia est gérée par le framework. Le contrat d'édition 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 :
| État | Action |
|---|---|
| Port explicite d'une source Remotion existante vers HyperFrames | Lisez references/routes/remotion-to-hyperframes.md, puis aiguillez 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'aiguillage de workflow et la couche d'intention ; chargez /hyperframes-cli et toutes 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 aucune question sur le 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 être déterminé de manière unique, posez une seule question d'aiguillage ; n'exécutez pas l'entretien d'intention. |
| Création fraîche | Exécutez la couche d'intention — references/intent-interview.md — puis aiguillez une fois en utilisant le tableau de la § 2. |
Si une demande fraîche n'identifie pas le sujet ou l'entrée, demandez de quoi parle la vidéo avant d'aiguiller. Vérifiez les préférences et les recettes avant de poser des questions (references/intent-interview.md, étape 1). Une entrée figma.com ou une recette nommée change l'absorption, pas l'aiguillage — la section "Adapter les entrées orthogonales" de l'entretien gère les deux.
Maintenir le CLI du projet à jour
Un projet scaffoldé épingle hyperframes@<version> dans ses scripts package.json pour que les rendus restent reproductibles ; l'épingle n'avance jamais d'elle-même, 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, sonde une fois avant la première commande affectant le rendu :
npx hyperframes@latest upgrade --project . --check
La sonde est en lecture seule et rapporte l'épingle par rapport à la dernière version publiée ; conservez le . explicite — sur les anciennes versions du 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 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 é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 une mise à niveau réussie n'est jamais silencieuse : nommez l'ancienne et la nouvelle version dans le résumé de l'exécution. Un projet sans composition encore n'a besoin d'aucune vérification. Si la vérification échoue, annulez la modification du package.json, continuez sur la version épinglée, et rapportez 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 mise à niveau non vérifiée.
2. Aiguiller une création fraîche
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 séquences existantes sans les modifier | /embedded-captions |
| 4 | Ajouter des superpositions graphiques conçues à des séquences existantes (interview, podcast) sans modifier la vidéo | /talking-head-recut |
| 5 | Construire une vidéo synchronisée au 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 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 l'aiguillage, 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 le point d'entrée d'entretien de cette route. Si le candidat ne satisfait pas son contrat, continuez l'aiguillage 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 design 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" est
/product-launch-video. - Des séquences existantes avec des sous-titres vont vers
/embedded-captions; des séquences avec des cartes d'information conçues vont vers/talking-head-recut. Le ré-étalonnage, le réordonnancement, le recoloriage, le recadrage ou le remixage de 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 pilote la pièce. La musique utilisée comme fond sonore ne remplace pas la route correspondant au sujet. - "Je veux un storyboard" change le processus de révision, pas le workflow. Sans autre signal d'aiguillage, 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. Aiguillez une pièce clairement plus longue vers
/general-video. La longueur ne remplace jamais un port, un deck, un sous-titre, une superposition ou un livrable piloté par la musique explicite.
3. Aiguiller une fois, puis quitter
Pour une création fraîche, la couche d'intention (references/intent-interview.md) exécute la conversation complète — mémoire, triage, tour de pitch, indispensables, forme de l'exécution, transfert — et se termine par l'écriture de BRIEF.md. Le brief est le seul artefact d'aiguillage que le workflow lit ; rien plus tard ne rouvre ce skill ou l'entretien. Répondez à 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é, installez-le ou mettez-le à jour ainsi que les compétences de domaine de base :
npx hyperframes skills update <nom-du-workflow>
Utilisez le nom nu sans /. Si la commande échoue, remontez l'erreur ; ne reconstruisez pas le workflow de mémoire. Tout le reste concernant l'installation — la division noyau vs paresseuse, ce que init rafraîchit, le diagnostic, le désabonnement 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 la composition, attributs de timing, pistes, variables, déterminisme | /hyperframes-core |
| Règles de mouvement, blueprints de scène, transitions, adaptateurs runtime | /hyperframes-animation |
GSAP, 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, sous-titres, étalonnages, LUT, médias réutilisables | /media-use |
| Gravure de voix off, chaînes d'effets audio, enveloppes d'automatisation, ou une chaîne/fader sur plusieurs pistes (bus de sous-mixage) | /hyperframes-audio |
| Init, lint, check, snapshots, compare, rendu par lots, Studio, render, publier ou diagnostics | /hyperframes-cli |
| Blocs et composants du registre | /hyperframes-registry |
| Actifs Figma, jetons, composants ou images de storyboard reconstruites en mouvement | /figma |
Les phrases d'édition du 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, trim, splice, 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 lisse ou recadrage, Ken Burns ou mouvement de caméra | /general-video + /hyperframes-core + /hyperframes-keyframes ; animez le wrapper visuel/cadrage intérieur, pas le clip temporisé. |
| coupe correspondante ou transition panoramique de caméra | /general-video + /hyperframes-animation + /hyperframes-keyframes + /hyperframes-registry ; recherchez/installez une primitive de transition avant d'écrire manuellement. |
| fondu, fondu enchaîné, gain/volume de piste, automatisation, duck/carve, effets audio, ou un effet sur plusieurs pistes | /general-video + /hyperframes-core + /hyperframes-audio ; core place les clips, le mixage audio place les pistes — y compris un bus de sous-mixage sur un groupe de celles-ci. |
| éditions 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 une rampe de vitesse non prise en charge / un freeze mi-source | /media-use ; sourçage/génération/prétraitement uniquement, jamais de mixage de pistes placées. |
data-playback-rate constant est sûr pour le rendu de l'image et du son préservé en hauteur. Il ne rend pas les rampes de vitesse source keyframables ; prétraitez les rampes.
Pour les contrats d'édition copiables, chargez /hyperframes-core → references/creator-editing-recipes.md.