motion-graphics — entrée de dispatch

Que fait motion-graphics — entrée de dispatch ?

Confirmer la route avant l'Étape 0. Cette compétence réalise un court graphique animé, design-led, non narré (le mouvement est le message ; ~moins de 10 s, pas de voix-off). Un traitement plus long, multi-scène ou narré → /general-video ; une vidéo narrée d'un site web → /website-to-video ; un explicateur thématique → /faceless-explainer ; une promotion produit → /product-launch-video ; des légendes sur des séquences existantes → /embedded-captions. Hors périmètre : données en direct / au moment du rendu, ou séquences impossibles à capturer. Pas sûr entre motion-first et narré ? Lire /hyperframes d'abord.

Un court graphique animé design-led. Actif d'abord : décider la stratégie d'actifs et sourcer du matériel réel avant de concevoir le plan, puis concevoir le plan autour de ce que vous avez, puis composer en réutilisant les capacités du catalogue. Tous les artefacts vont dans PROJECT_DIR = videos/<nom-projet>/ (créé à l'Étape 0) ; tous les chemins ci-dessous sont relatifs à ce répertoire.

Phase	Exécution	Artefact principal	Flux détaillé
init	Bash	hyperframes.json	Étape 0
plan	sous-agent — décider recherche ? + classer + stratégie d'actifs	shot-plan.json (brouillon : catégorie, requêtes asset_needs, brief)	agents/director.md (Partie 1)
source ◇	Bash — résolution media-use (sauter si asset_needs est vide)	assets/ + assets/index.md	phases/source/guide.md
design	sous-agent — conception du plan autour des actifs résolus	shot-plan.json (final : bloc(s) + mise en page + mouvement + positions)	agents/director.md (Partie 2)
build	sous-agent — composition reuse-first	compositions/index.html	agents/builder.md
render	Bash — hyperframes render (MP4, ou --format webm/mov pour superposition)	renders/video.mp4	Étape 5
verify	Bash — lint / inspect -> sous-agent de réparation en cas d'échec	(corrections sur place)	agents/finalize.md

◇ source ne s'exécute que lorsque la catégorie choisie déclare des actifs. Les catégories purement code/texte (par ex. kinetic-type, la plupart des charts/stat) ont asset_needs: [] et passent directement de la planification à la conception.

Catégories — divisées par la décision de recherche

La première décision de plan est : cela nécessite-t-il une recherche ? Cette bifurcation divise les catégories en deux groupes ; puis la catégorie spécifique est choisie — pour les catégories pilotées par la recherche, selon le type de contenu que la recherche renvoie. Chaque catégorie est un categories/<id>/module.md (ses règles de planification + construction) ; le vocabulaire de mouvement partagé vit dans references/motion-vocabulary.md (→ règles/plans hyperframes-animation + blocs de registre).

Catégories de formulaire — pas de recherche ; l'utilisateur fournit le contenu :

Catégorie	Intention	S'appuie sur
kinetic-type	ligne / citation / titre percutante, texte motion-first	blocs caption-* + règles d'animation
stat	nombre héros unique / compteur + anneau	apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills}
charts	barres / lignes / camembert / course / % à partir de données	bloc data-chart
logo-reveal	logo sting / habillage de marque (logo utilisateur)	logo-outro / rules/svg-path-draw
lower-thirds	barres de nom / titre, callouts, superpositions sociales	caption-* + blocs de superposition du registre

Catégories pilotées par la recherche — chercher d'abord, puis animer selon le type de contenu (chemin RWA):

Contenu retourné	Catégorie	Animation
page web / lien	webpage	animation de page web / UI (défilement, révélation, curseur, callouts)
article d'actualité	news	révélation de titre + carte source + callouts de faits clés
tweet	tweet	carte tweet animée
image / entité	asset-fusion	la géométrie de l'actif devient le graphique (fusion diégétique RWA)

Ordre de construction : un à la fois, couverture d'abord (l'approximatif convient). kinetic-type porté du prototype ; le reste suit.

Prérequis

macOS Apple Silicon ou Linux x64. Outils système : brew install node ffmpeg. npx hyperframes doctor une fois. Rendu GPU macOS : export PRODUCER_BROWSER_GPU_MODE=hardware.

Clés optionnelles (fallbacks locaux si non définies) — nécessaires uniquement pour les catégories qui sourcent/génèrent des actifs via media-use :

Clé	Utilisé pour	Fallback
GEMINI_API_KEY / GOOGLE_API_KEY	génération d'images (résolution media-use)	ignorer génération / recherche seule
(fournisseurs asset_scout / recherche)	recherche d'actifs réels webpage/news/tweet + asset-fusion	la catégorie dégrade vers sans actif

Flux

Étape 0 — Initialiser

cwd est la racine de l'espace de travail de l'agent ; écrire tous les artefacts sous PROJECT_DIR = videos/<nom-projet>/. <nom-projet> : utiliser le répertoire donné par l'utilisateur, sinon un nom court en kebab-case dérivé de l'intention (<sujet>-motion). Pas le nom de base de l'espace de travail ni un timestamp.

Uniquement lorsque $PROJECT_DIR/hyperframes.json est absent :

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<nom-projet>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank

init vérifie les compétences installées par rapport aux dernières sur GitHub et met à jour l'ensemble global si certaines sont obsolètes.

Contraintes : ne jamais hyperframes init dans la racine de l'espace de travail ; ne jamais imbriquer un autre hyperframes/ dans PROJECT_DIR ; chaque commande Bash (maître + sous-agents) est un sous-shell (cd "$PROJECT_DIR" && ...) — jamais de cd nu.

Étape 1 — Planifier (sous-agent : Directeur Partie 1)

Lancer un sous-agent. invite = agents/director.md complet + ## Contexte de dispatch (SKILL_DIR / PROJECT_DIR / la demande de l'utilisateur / Schema: <SKILL_DIR>/references/shot-plan-ir.md). Il doit :

1. Décider : cela nécessite-t-il une recherche ? (la première bifurcation)
   • Non → choisir une catégorie de formulaire (kinetic-type / stat / charts / logo-reveal / lower-thirds) ; le contenu est fourni par l'utilisateur ; asset_needs: [].
   • Oui → émettre un plan de recherche dans asset_needs[] (actualités / web / tweet / image ; requêtes bipolaires). La catégorie pilotée par la recherche spécifique (webpage / news / tweet / asset-fusion) est confirmée par le type de contenu retourné à l'Étape 2 et finalisée à l'Étape 3.
2. Écrire un brouillon shot-plan.json (enveloppe + catégorie de formulaire choisie ou intention de recherche + asset_needs + un paragraphe de brief de plan). Schéma : references/shot-plan-ir.md.

Validation : [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.

Étape 2 — Source ◇ (Bash : media-use, conditionnel)

Si shot-plan.json.asset_needs n'est pas vide, résoudre les actifs (rechercher / générer / récupérer → chemins figés locaux au projet + registre). Voir phases/source/guide.md (encapsule media-use resolve ; les catégories pilotées par la recherche utilisent la recherche d'actualités/web/tweet/image). Si asset_needs est vide, passer à l'Étape 3.

# illustratif — voir phases/source/guide.md
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)

Dégrader gracieusement : si un fournisseur de recherche est indisponible, la catégorie retombe sur sans actif (le noter dans context.log).

Étape 3 — Concevoir (sous-agent : Directeur Partie 2)

Lancer un sous-agent (invite = agents/director.md Partie 2 + contexte de dispatch incluant le assets/index.md résolu si l'Étape 2 a été exécutée + catalog-map.md). Il conçoit le plan autour des actifs disponibles : choisir le(s) bloc(s) de catalogue + les règles/plans hyperframes-animation, la mise en page, le mouvement, les temps forts, et (pour asset-fusion) les element_positions + la palette de pipette. Finalise shot-plan.json (content.block + content.customize + contenu par catégorie).

Étape 4 — Construire (sous-agent : Constructeur, reuse-first)

Lancer un sous-agent. invite = agents/builder.md complet + contexte de dispatch (shot-plan.json, catalog-map.md, le module.md de la catégorie, references/motion-vocabulary.md, references/builder-contract.md). Reuse-first : npx hyperframes add <bloc> + personnaliser sur place ; écrire à la main uniquement les lacunes + l'affordance de fusion d'actifs. Sortie compositions/index.html respectant le contrat HF (timeline GSAP en pause sur window.__timelines, class="clip" + ids stables, tl.seek(0), déterministe).

Étape 5 — Rendre (Bash)

(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q draft -o ./renders/video.mp4)
# variante superposition transparente : --format webm  (ou mov)

Étape 6 — Vérifier (Bash → sous-agent de réparation en cas d'échec)

(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .)

exit 0 → terminé. En cas d'erreurs de lint/inspect, lancer le sous-agent de réparation (agents/finalize.md : QA instantané + un passage de correction sur place + re-rendu). Ne jamais changer une durée fixe lors de la réparation.

Rapport + aperçu optionnel

Rapporter la sortie finale (renders/video.mp4, ou la variante .webm / .mov pour superposition) + durée. Ne pas ouvrir d'aperçu pendant l'exécution. N'en proposer un que sur demande, démarré après le rendu afin qu'il serve le fichier final :

(cd "$PROJECT_DIR" && npx hyperframes preview)   # Studio UI ; ou `npx hyperframes play` pour un lien partageable

Les drapeaux se trouvent dans la compétence hyperframes-cli (references/preview-render.md).

Tableau de reprise

État	Continuer depuis
pas de shot-plan.json	Étape 1 (planifier)
shot-plan.json a asset_needs, pas de assets/	Étape 2 (source)
shot-plan.json final, pas de compositions/index.html	Étape 3/4 (concevoir+construire)
compositions/index.html existe, pas de renders/video.mp4	Étape 5 (rendre) + Étape 6
renders/video.mp4 existe	Rapport + arrêt

Notes de conception (mainteneurs — l'exécution ne lit pas ceci)

• Raisonnement actif d'abord : le sourcing est fait en amont et informe la conception du plan (le flux RWA : analyser → rechercher → examiner → composer). Les catégories pilotées par la recherche (webpage/news/tweet) et asset-fusion s'appuient toutes sur la recherche media-use (actualités/web/tweet/image), qui est la lignée RWA documentée de media-use.
• Reuse-first : l'analogue intra-écosystème des modèles générés par LLM est "composer des blocs de catalogue + règles hyperframes-animation". La timeline GSAP en pause de HF ≙ le useCurrentFrame de Remotion.
• Contrat du module de catégorie : un categories/<id>/module.md (planification + construction), partageant references/motion-vocabulary.md (+ évaluation optionnelle). Ajouter une catégorie = déposer le dossier + enregistrer sa ligne de classificateur dans agents/director.md + sa ligne dans catalog-map.md ; le pipeline de phases est inchangé.
• Forme du répertoire :

  videos/<nom-projet>/
    hyperframes.json  context.log
    shot-plan.json            # l'IR (sortie du Directeur)
    assets/  assets/index.md  # sortie media-use (si sourcé)
    compositions/index.html   # sortie du Constructeur
    renders/video.mp4
  

• Enregistrement : dans le routeur hyperframes — ajouter l'intention "court graphique animé design-led" + description du Workflow ; retirer les déclencheurs motion-graphics de /general-video ; ajouter les arêtes inverses "NE PAS UTILISER". Voir motion-graphics-genre.md §5-7.