motion-graphics

Avant tout, gardez ce skill à jour — exécutez-le silencieusement, ne demandez pas : npx hyperframes skills update motion-graphics. Une opération rapide sans effet quand tout est à jour ; sinon, il met à jour ce skill ainsi que les skills de domaine principaux dont il dépend avant que vous ne les utilisiez.

source figma : Si le logo/asset/animation à construire provient d'une URL figma.com, exécutez /figma d'abord — export d'assets, tokens de marque et traduction Motion→GSAP si le graphique est une importation Figma Motion — puis construisez à partir de sa sortie. N'utilisez pas directement les outils MCP bruts pour piloter Figma : cela contourne l'assainissement SVG, la provenance de .media/manifest.jsonl et la liaison var() des tokens de marque, de sorte qu'un changement de marque ultérieur ne peut pas se propager sans une réimportation complète.

motion-graphics — point d'entrée

La porte d'entrée est /hyperframes. Ce skill crée un court graphique animé, orienté design, sans narration (le mouvement est le message ; ~moins de 10 s, pas de voix off). Tout ce qui est plus long, narré ou multi-scène — ou en cas d'incertitude → lisez /hyperframes d'abord : la couche d'intention possède chaque décision d'acheminement.

Ce workflow est autonome par conception — au plus une question de clarification (agents/director.md), puis construisez jusqu'à la vérification sans révision intermédiaire. La couche d'intention (/hyperframes → references/intent-interview.md) achemine ici directement sans questions sur la forme de l'exécution ; un storyboard et une session d'accompagnement n'ajoutent pas grand-chose à un morceau aussi court. Le rendu est toujours à la discrétion de l'utilisateur : après la réussite des vérifications et des captures de preuve, posez la question canonique « prévisualisation ou rendu ? » de ../hyperframes-core/references/brief-contract.md. Quand un BRIEF.md existe, lisez-le avant la question du directeur.

Un court graphique animé orienté design. Asset-first : décidez de la stratégie d'assets et sourcez le matériel réel avant de concevoir le plan, puis concevez le plan autour de ce que vous avez, puis composez en réutilisant les capacités du catalogue. Tous les artefacts vont dans PROJECT_DIR = videos/<project-name>/ (créé à l'étape 0) ; tous les chemins ci-dessous lui sont relatifs.

Phase	Exécution	Artefact principal	Flux détaillé
init	Bash	hyperframes.json	Étape 0
plan	sous-agent — décider recherche ? + classifier + stratégie d'assets	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 assets résolus	shot-plan.json (final : bloc(s) + disposition + mouvement + positions)	agents/director.md (Partie 2)
build	sous-agent — composition priorisant la réutilisation	compositions/index.html	agents/builder.md
verify	Bash — lint, check, captures de preuve ; réparation en cas d'échec	snapshots/planche-contact.jpg	Étape 5
approve	Demander prévisualisation ou rendu ; attendre la réponse	approbation explicite du rendu	Étape 6
render	Bash — hyperframes render (MP4, ou --format webm/mov pour incrustation)	renders/video.mp4 ou incrustation transparente	Étape 6

◇ source s'exécute uniquement lorsque la catégorie choisie déclare des assets. Les catégories purement code/texte (p. ex. kinetic-type, la plupart de 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 la phase plan est : cela nécessite-t-il une recherche ? Cette bifurcation sépare les catégories en deux groupes ; ensuite, la catégorie spécifique est choisie — pour les catégories basées sur la recherche, par le type de contenu retourné par la recherche. Chaque catégorie est un categories/<id>/module.md (ses règles de planification + de construction) ; le vocabulaire de mouvement partagé se trouve 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/chiffre/citation percutante, texte prioritaire au mouvement	blocs caption-* + règles d'animation
stat	un seul numéro héros / compteur + anneau	apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills}
charts	barre / ligne / camembert / course / % à partir de données	bloc data-chart
logo-reveal	signature logo / bloc de marque (logo utilisateur)	logo-outro / rules/svg-path-draw
lower-thirds	barres de nom/titre, incrustations, superpositions sociales	caption-* + blocs d'incrustation du registre
maps	mouvement géographique — mettre en valeur des régions, connecter des lieux, zoomer sur un emplacement (couche vectorielle ou couche de fond de carte intégrée)	famille us-map / world-map + bake-basemap.mjs

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

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

Ordre de construction : un à la fois, priorité à la couverture (l'ébauche est acceptable). 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) — uniquement nécessaires pour les catégories qui sourcent/génèrent des assets via media-use :

Clé	Utilisée pour	Fallback
GEMINI_API_KEY / GOOGLE_API_KEY	génération d'images (résolution media-use)	ignorer la génération / recherche uniquement
(fournisseurs de recherche asset_scout)	recherche d'assets réels pour webpage/news/tweet + asset-fusion	la catégorie se dégrade en version sans asset

Flux

Étape 0 — Initialiser

Le répertoire de travail courant est la racine de l'espace de travail de l'agent ; écrivez tous les artefacts sous PROJECT_DIR = videos/<project-name>/. <project-name> : utilisez 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 ou un horodatage.

Seulement quand $PROJECT_DIR/hyperframes.json est absent :

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics

init vérifie les skills installés par rapport aux dernières versions sur GitHub et met à jour l'ensemble global si l'un d'eux est obsolète.

Contraintes : ne jamais hyperframes init dans la racine de l'espace de travail ; ne jamais imbriquer un autre dossier hyperframes/ à l'intérieur de 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)

Lancez un sous-agent. prompt = agents/director.md entier + ## 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[] (news / web / tweet / image ; requêtes bipolaires). La catégorie basée sur 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 de shot-plan.json (enveloppe + catégorie de formulaire choisie ou intention de recherche + asset_needs + un brief de plan d'un paragraphe). Schéma : references/shot-plan-ir.md.

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

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

Si shot-plan.json.asset_needs n'est pas vide, résoudre les assets (recherche / génération / récupération → chemins locaux figés dans le projet + registre). Voir phases/source/guide.md (encapsule media-use resolve ; les catégories basées sur la recherche utilisent la recherche news/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 une recherche/un fournisseur est indisponible, la catégorie tombe en mode sans asset (le noter dans context.log).

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

Lancez un sous-agent (prompt = 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 assets disponibles : choisir le(s) bloc(s) du catalogue + les règles/plans hyperframes-animation, la disposition, le mouvement, les temps forts, et (pour asset-fusion) les element_positions + la palette de prélèvement de couleurs. Finalise shot-plan.json (content.block + content.customize + contenu par catégorie).

Étape 4 — Construire (sous-agent : Constructeur, priorité à la réutilisation)

Lancez un sous-agent. prompt = agents/builder.md entier + contexte de dispatch (shot-plan.json, catalog-map.md, le module.md de la catégorie, references/motion-vocabulary.md, references/builder-contract.md). Priorité à la réutilisation : npx hyperframes add <block> + personnaliser sur place ; n'écrire à la main que les lacunes + l'affordance de fusion d'assets. 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 — Vérifier (Bash → sous-agent de réparation en cas d'échec)

(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <instants-de-preuve>)

Choisissez des instants de preuve qui montrent l'état d'ouverture, le mouvement signature et la tenue finale. Inspectez la planche de contact ou les captures générées avant de continuer. En cas d'échec de lint, check ou de capture, lancez le sous-agent de réparation (agents/finalize.md) pour un passage de correction sur place, puis réexécutez la porte défaillante. Ne modifiez jamais une durée fixe simplement pour masquer un défaut.

Étape 6 — Approuver et rendre (Bash)

Posez une question : « prévisualisation ou rendu ? » Si l'utilisateur choisit la prévisualisation, ouvrez Studio et revenez à la même porte d'approbation après les révisions :

(cd "$PROJECT_DIR" && npx hyperframes preview --background)

Ne rendez qu'après une réponse explicite de rendu :

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

Vérifiez que la sortie existe, n'est pas vide et a la durée prévue. La remise finale nomme l'artefact, la durée réelle, l'identifiant de composition ou de frame, les instants de preuve et la planche de contact ou les captures inspectées. Les drapeaux se trouvent dans /hyperframes-cli → references/preview-render.md.

Tableau de reprise

État	Continuer depuis
pas de shot-plan.json	Étape 1 (planifier)
shot-plan.json a des asset_needs, pas de assets/	Étape 2 (sourcer)
shot-plan.json final, pas de compositions/index.html	Étape 3/4 (concevoir+construire)
compositions/index.html existe, captures de preuve absentes	Étape 5 (vérifier)
vérifications et captures de preuve réussies, pas de rendu approuvé	Étape 6 (approbation)
rendu approuvé existe	vérifier la sortie, puis rapporter

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

• Justification de l'approche asset-first : le sourçage est fait en amont et informe la conception du plan (le flux RWA : analyser → rechercher → examiner → composer). Les catégories basées sur la recherche (webpage/news/tweet) et asset-fusion s'appuient toutes deux sur la recherche media-use (news/web/tweet/image), qui est la lignée RWA documentée de media-use.
• Priorité à la réutilisation : l'analogue dans l'écosystème des templates générés par LLM

…

[tronqué pour la traduction]