tellmotion

TellMotion — idée → thème → animation

Un flux reproductible, économique en tokens. Fonctionne pour tout sujet qui tient en 2D : diagrammes, processus, architectures, algorithmes, chronologies, concepts. (Pas pour la 3D ou la vidéo live.)

Structure de cette compétence : themes/ (catalogue theme.json) · tools/ (Node, zéro dépendance) · assets/base (template Motion Canvas, avec recettes de scènes) · assets/packs/ (packs de composants optionnels) · scripts/new-project.sh · references/.

1. Brief (un seul tour, ne demander que ce qui manque)

Si l'utilisateur a déjà donné le contenu/la structure, ne pas redemander. Utiliser AskUserQuestion (4 questions max) pour ce qui manque :

1. Sujet et contenu (si absent : en proposer un inventé et le préciser).
2. Durée / rythme (défaut : rythme calme, scènes de 20 à 60 s) et fps (défaut 30 prévisualisation / 60 rendu).
3. Design — toujours proposer ces trois options :
   • Template : utiliser un thème du catalogue. Exécuter node tools/list-themes.mjs (liste compacte) et demander l'id ; pour une navigation visuelle, exécuter node tools/build-catalog.mjs <tmpdir> et ouvrir gallery.html (servir avec node tools/serve.mjs <tmpdir>).
   • Design personnalisé : écrire 3 propositions contrastées de theme.json (voir references/theme-format.md), générer des aperçus et laisser l'utilisateur choisir (étape 2).
   • Apportez le vôtre : l'utilisateur fournit ses couleurs/polices de marque ou un fichier Figma → en dériver un theme.json.
4. Packs : déduire du sujet, ne pas demander sauf en cas d'ambiguïté, et n'ajouter que ceux que les scènes personnalisées utiliseront : cloud (architectures), algorithms (tri, arbres), charts (données), flowchart (processus), timeline (histoire/feuilles de route), code (programmation, CLI), typography (intros, citations, comparaisons), science (cycles, couches, ondes), math (équations, fonctions), ui (démo produit, parcours utilisateur), maps (lieux, voyages). Combinables librement ; references/packs.md liste chaque composant.

2. Design personnalisé (ignorer si un template a été choisi)

1. Écrire 3 propositions sous forme de fichiers theme.json dans un dossier temporaire (copier le thème du catalogue le plus proche et changer les tokens ; différentes familles, ex. technique / ludique / éditorial).
2. node tools/validate.mjs <fichier> pour chacun, puis node tools/build-catalog.mjs <out> --themes <dossier>.
3. Montrer les aperçus : ouvrir <out>/gallery.html dans le navigateur (serve.mjs) ou envoyer les SVG. Attendre le choix de l'utilisateur.
4. Option haute-fidélité avec Figma (uniquement si l'utilisateur le souhaite et si le connecteur Figma existe) : references/figma.md.
5. Sauvegarder le thème choisi dans <projet>/theme.custom.json (et proposer de le contribuer au catalogue).

3. Storyboard (l'utilisateur approuve avant toute animation)

Réécrire une animation coûte cher ; réécrire une liste de scènes non. Ignorer cette étape uniquement pour une scène unique ou si l'utilisateur le demande.

1. Lire references/storyboard.md et references/recipes.md, puis écrire storyboard.json : une entrée par scène, avec sa recette (ou custom), ce qu'elle montre, sa durée en secondes et son texte réel.
2. node tools/storyboard.mjs validate <fichier>, puis node tools/storyboard.mjs preview <fichier> --theme <id|fichier> --out <tmpdir>. Afficher la page dans le navigateur (serve.mjs), et lister les scènes dans le chat.
3. Attendre l'approbation de l'utilisateur. Modifier le storyboard, pas le code, jusqu'à son accord. Arrêter le serveur d'aperçu ensuite.

Après l'approbation, travailler de manière autonome jusqu'à la livraison.

4. Projet

bash <skill>/scripts/new-project.sh <nom> --theme <id|path.json> [--pack a,b|all] [--demos]

(--demos copie la scène de démonstration de chaque pack : pratique pour apprendre une API, puis supprimer les démos.) Exécuter depuis le dossier qui doit contenir le projet. Un projet par sujet ; ajouter des scènes pour de nouvelles vidéos. Copie le template, applique le thème (src/theme.ts, src/fonts.ts), installe les dépendances et enregistre le projet dans .claude/launch.json. Changer de thème plus tard : node <skill>/tools/apply-theme.mjs <theme> <projet> puis npm install.

5. Scènes

node tools/storyboard.mjs generate <fichier> <projet> écrit chaque scène et src/project.ts. Les scènes de recette sont terminées. Chaque scène custom est un placeholder fonctionnel avec son titre, ses légendes et sa durée : écrire son animation en les conservant. Pour celles-ci, lire references/motion-guide.md (API de base, recette de mise en page, pièges) et references/packs.md (composants des packs). Réexécuter generate conserve les scènes que vous avez modifiées. Règles fixes :

• Une scène par bloc dans src/scenes/, enregistrée dans src/project.ts (+ un fichier .meta par scène).
• Utiliser prepareScene(view, title) ; appeler enter() en premier et leave() en dernier ; légendes via sub.say(text).
• Texte ≥ 28 px en 1920x1080 ; légendes ≤ 85 caractères ; une couleur de catégorie par type d'élément + légende dans src/config.ts (LEGEND).
• Ne montrer que ce qui est nécessaire par scène ; glow() l'élément actif et dim() le reste.
• Texte, minutages et couleurs modifiables sous forme de constantes en haut de chaque scène (commentaire EDITABLE TEXT) ; vitesse globale dans PACE.
• Relier les pièces avec connect(root, a, b). Les requêtes et événements voyagent avec send(root, arrow.points, {shape: 'dot' | 'diamond', to: piece}), ainsi la forme les distingue et la pièce réagit à l'arrivée.
• Ne jamais coder en dur les couleurs ou polices dans les scènes : utiliser C, S, FONT, fs() de config.ts pour que les thèmes restent interchangeables.

6. Vérification (peu coûteuse)

1. npm run typecheck dans le projet, puis node tools/storyboard.mjs duration <projet> : si une scène s'éloigne trop du plan approuvé, la corriger ou en informer l'utilisateur.
2. preview_start (nom du projet depuis .claude/launch.json), resize_window 1700x950, puis cliquer sur la timeline et zoom sur [215,0,800,330] ; grouper plusieurs clics+zooms en un seul browser_batch. scroll right sur la timeline pour atteindre les scènes suivantes.
3. Quand terminé : resize_window préréglage desktop, preview_stop. Ne pas rendre en mp4 sauf demande.

7. Rendu (sur demande)

npm run render dans le projet écrit output/<nom>/<nom>.mp4 et render.json (durée par scène, tailles de fichier), sans ouvrir l'éditeur. Options (après npm run render --) :

• --format mp4,webm,gif · --thumb ou --thumb-at <secondes> · --fps <n> · --scale <n>. L'encodage WebM est lent (plusieurs minutes) : ne le demander que si nécessaire.
• --aspect 9:16,1:1: adapte la vidéo à l'intérieur avec des barres dans le fond du thème (--pad-color surcharge) ; ne réorganise pas la scène, donc le texte rétrécit à environ 56 %. Le dire à l'utilisateur.
• --draft: 30 fps à demi-taille, dans output/<nom>-draft/. L'utiliser pour réviser.
• --info: durée de chaque scène, rien de rendu. Peu coûteux : le préférer au rendu pour vérifier le rythme.
• --dry-run: plage de taille par fichier à partir d'échantillons rendus, rien n'est sauvegardé. L'utiliser avant un gros rendu ou si l'utilisateur s'inquiète de la taille.

Nécessite Chrome, Edge ou Chromium (CHROME surcharge le chemin). Projets créés avant l'existence de ce script : node <skill>/tools/render.mjs <projet>. La source est tools/render.mjs.

8. Livraison

Lister les scènes (nom → ce qu'elle montre), comment exécuter (npm start), comment rendre (npm run render), comment modifier le rythme (PACE), les textes (constantes par scène), le thème (apply-theme.mjs). Préciser ce qui n'a pas été vérifié. Si l'espace de travail contient un CLAUDE.md, y ajouter le nouveau projet.

Économie de tokens

• Ne pas relire les fichiers que vous venez d'écrire ; utiliser Edit.
• Utiliser list-themes.mjs au lieu de lire les fichiers JSON de thèmes ; ne lire un seul thème que lors de la personnalisation.
• Grouper les captures d'écran/zooms ; éviter les captures pleine page.
• Réutiliser assets/ au lieu de régénérer les composants.