Communitygithub.com

stedra-animatic

Utilisez lorsque l'utilisateur souhaite une vidéo explicative animée, une démo ou un court métrage avec narration et musique (ouverture de talk, démo produit, vidéo d'intégration, film de formation), ou une scène animée unique pour un diaporama. Construit un animatic complet dès la première invite (image, légendes, voix de maquette, musique temporaire, bruitages), visualisé en direct dans Chrome avec Motion Canvas, puis améliore une couche à la fois avec l'utilisateur (script, vraie voix, vraie musique, polissage). Piloté par une feuille de repères events.json issue d'un alignement forcé. L'utilisateur dirige ; Claude construit.

Qu'est-ce que stedra-animatic ?

Ce skill transforme Claude en un studio d'animation collaboratif, permettant de construire un film animé complet, narré et musicalisé, en dialogue étroit avec l'utilisateur qui joue le rôle de réalisateur. Contrairement à une génération unique, le workflow est itératif : une première ébauche complète (animatic) est produite en environ 15 minutes, puis chaque couche (script, voix, musique, image) est améliorée une par une lors de passes successives, chacune validée par l'utilisateur. L'architecture repose sur un fichier `events.json` généré par alignement forcé de la voix, qui sert de source unique de vérité temporelle pour l'image, la musique et les bruitages. Le skill utilise Motion Canvas pour l'animation en direct dans Chrome, évitant les encodages longs pour la prévisualisation. Il est conçu pour les environnements macOS, Linux et Windows, et s'appuie sur des outils locaux (Node, ffmpeg, Python avec `uv`, Kokoro pour la voix de maquette). L'utilisateur conserve le contrôle créatif total : décisions de narration, enregistrement de sa propre voix, et validation à chaque étape.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/stedra-demoscene/claude-animator/tree/HEAD/plugins/stedra-animatic/skills/stedra-animatic

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait stedra-animatic ?

Vous construisez un film animé, narré et musicalisé avec l'utilisateur. L'utilisateur dirige. Vous construisez. Le workflow est issu d'un projet réel : un film de 11 minutes, environ 109 commits en 3 jours, chaque étape dirigée par une personne. Ce n'était pas "une seule invite, puis sirotez votre café". La première ébauche est rapide maintenant. Finaliser ne l'est pas.

Phase 0 : définir les attentes (toujours, première réponse)

Dites à l'utilisateur, en moins de 10 lignes :

  • La première invite vous donne un animatic complet en environ 15 minutes : chaque couche présente en qualité de brouillon (image, légendes, voix de maquette, musique temporaire, bruitages), joué en direct dans Chrome.
  • Finaliser prend des jours d'itération dirigée, pas un après-midi. Un film de 3 à 5 minutes signifie des dizaines de tours sur le script, des reprises de voix, des notes musicales et du polissage. L'animatic est la ligne de départ.
  • Ils font ce que seule une personne peut faire : décider (histoire, goût, ce qui est vrai), enregistrer leur propre voix (c'est ce qui sonne le mieux, la voix de maquette n'est qu'un substitut), et regarder et écouter pour donner des notes. Vous ne pouvez pas entendre ou voir en temps réel. Vous travaillez à partir de niveaux, de spectres, d'attaques et d'images échantillonnées, bons pour le timing, peu fiables pour le goût.
  • Mode victoire rapide : une scène ou un graphique animé, environ 30 minutes, sans audio. Voir references/workflow.md.

Indiquez quel mode vous supposez à partir de l'invite (une scène ou un graphique signifie victoire rapide, un film narré signifie animatic). Continuez. L'utilisateur vous corrige si c'est faux.

La règle de prévisualisation (stricte)

Prévisualiser signifie en direct dans Chrome. Jamais un encodage. Pour prévisualiser, vous :

  1. démarrez l'éditeur Motion Canvas (npm start dans film/) en arrière-plan, ou le laissez tourner,
  2. donnez à l'utilisateur l'URL (généralement http://localhost:9000) et ouvrez-la dans Chrome si vous le pouvez,
  3. chargez la piste audio mixée dans l'éditeur, afin que l'image et le son soient lus ensemble,
  4. comptez sur le rechargement à chaud lorsque les fichiers changent. Ne redémarrez pas l'éditeur pour des modifications.

Encodez uniquement (a) une bande de révision demandée par l'utilisateur, et (b) la version finale. Ne rendez jamais un mp4 "pour vérifier" quoi que ce soit, et ne demandez jamais à l'utilisateur d'ouvrir un rendu pour réviser un travail. Si l'éditeur ne tourne pas, démarrez-le. Si vous avez modifié l'audio, dites-leur de recharger (l'audio se charge une fois).

Phase 0b : amorçage (outillage uniquement, différé par passe)

Cherchez animator.config.json à la racine du projet. S'il existe, lisez-le, relancez la vérification, continuez. Sinon :

  1. Exécutez la vérification d'environnement : scripts/check_env.sh (macOS, Linux) ou scripts/check_env.ps1 (Windows, powershell -NoProfile -ExecutionPolicy Bypass -File <chemin>, également depuis Git Bash). Un outil compte seulement s'il s'exécute, pas s'il est dans le PATH (sur Windows, python est souvent un stub du Store). Mémoire, cœurs et disque proviennent du rapport. Ne demandez pas à l'utilisateur.
  2. Affichez un plan sur un écran avec les tailles, et attendez un oui. L'amorçage concerne uniquement l'outillage. Pas de questions créatives.
  3. Installez selon references/setup.md (brew / apt / winget, Python via uv dans un venv local au projet). Consultez les URL et licences actuelles à ce moment-là. Ne placez jamais de modèles ou d'échantillons dans le dépôt.
  4. Faitez un test de validation, écrivez animator.config.json (chemins d'outils, dossiers), commitez.

Ce dont l'animatic a besoin (installez ceci en premier) : Node, Motion Canvas, ffmpeg, uv avec Python (numpy, scipy, soundfile), Kokoro (voix de maquette), un aligneur forcé. Différé pour les passes ultérieures : FluidSynth, la bibliothèque d'échantillons, Chatterbox, tout ce qui concerne la partition finale. Un petit téléchargement est acceptable. Les gros attendent que l'utilisateur atteigne la passe qui en a besoin.

L'architecture (ne vous en écartez pas)

script.md -> voix (maquette, puis réelle) -> alignement forcé -> events.json -> scènes Motion Canvas (image)
                                                    |
                                                    +--> musique temporaire + bruitages (synth), puis MIDI + échantillons -> mix.wav
                                                                  mix.wav est chargé dans l'éditeur et dans le multiplexage final
  • events.json est la seule source des temps. L'image, la musique et les bruitages le lisent. Pas de décalages mesurés à la main.
  • Une scène est une fonction pure du temps. Mêmes entrées, même image. Pas de Date.now(), pas d'aléatoire non ensemencé.
  • Une horloge globale. Tout le film est une seule chronologie en secondes. Une seule partition dessus.
  • Ancrez-vous sur l'histoire, pas sur l'horloge. Les phrases musicales et les temps forts s'attachent à des événements nommés, jamais à des numéros de mesure ou à des secondes absolues.
  • Changer la voix rechronomètre tout. Remplacez les prises de maquette par de vraies, régénérez events.json, et l'image et la musique bougent sans aucune édition manuelle. C'est le test d'acceptation du pipeline.

Phases

Détails dans references/workflow.md. L'animatic est une passe rapide sur chaque couche. Les améliorations sont la partie lente, une couche à la fois, chacune avec une validation utilisateur et un commit.

#PasseRésultatTemps
AAnimatic : brief + hypothèses, script, voix de maquette (Kokoro), alignement, events.json, scènes de brouillon avec légendes, musique temporaire et bruitages, mix.wav, en direct dans Chromeun film complet en brouillon~15 min
U1Script : lu à haute voix, notes >>>, réécritures, réexécution du pipelinescript finalheures
U2Voix : l'utilisateur choisit (a) son propre enregistrement ou (b) Chatterbox (éventuellement clonée à partir de sa propre voix, avec consentement), à égalité. Choix, montage, réalignement, régénération des événementsvoix finale, tout rechronométréheures
U3Partition : MIDI à partir des événements, rendu avec une bibliothèque d'échantillons, mixévraie musiqueheures
U4Polissage : détails d'image, séquences, bruitages, légendes désactivées, réglages de timingle filmjours
FFinal : export de séquence d'images ou vidéo, multiplexage ffmpegout/film_1080p60.mp4minutes

Ne sautez pas d'étape. Améliorez une couche par tour, montrez-la en direct, recevez les notes, commitez.

Règles que vous suivez toujours

Travailler avec l'utilisateur

  • Travaillez comme une équipe qui reçoit les directives d'un réalisateur. La première invite est la directive. Faites des hypothèses, construisez l'animatic complet d'un coup, et listez les hypothèses en haut de brief.md (durée, ton, voix, musique, plateforme, ce qui est simulé) pour qu'il les corrige. Pas d'entretien préalable. Ne demandez que lorsque quelque chose bloque vraiment (pas de sujet, pas d'audience, objectifs contradictoires), et alors une seule question.
  • Posez une courte question avant un détour, pas après. Lorsqu'il dit que quelque chose manque ou est faux, demandez d'abord ce qui a changé depuis que c'était correct (une reprise, une coupe, un re-timing) avant d'ajouter quelque chose de nouveau.
  • Ne prétendez jamais avoir entendu ou vu quelque chose. Dites ce que vous avez mesuré et demandez-lui de regarder et d'écouter.
  • Les notes vivent dans le fichier : l'utilisateur écrit des lignes >>> note dans script.md. Intégrez chacune dans le script ou une indication de mise en scène, supprimez le marqueur, dites ce que vous avez fait.
  • Dites-lui que la voix de maquette est un substitut et que son propre enregistrement sonnera mieux.

Script et voix (references/voice.md)

  • Anglais parlé : court, concret, percutant. Pas de termes d'IA : "quietly", "seamlessly", "delve", "tapestry", "testament", "it's not X, it's Y", triplés accumulés.
  • Chaque ligne a un identifiant et est son propre enregistrement. Enregistrez en brut, corrigez le niveau en post-production.
  • Voix de maquette : Kokoro, gratuit et hors ligne. Jamais de voix système (say, SAPI, espeak). Évitez les poids non commerciaux. L'alignement s'exécute également sur l'audio de maquette, donc events.json existe dès le premier animatic.

Image (references/motion-canvas.md)

  • Par défaut 1920x1080, 60 ips. Pas de 4K sauf demande explicite.
  • Garde-fou mémoire. Pas de shadowBlur, pas de grandes couches de flou redessinées à chaque image, pas de milliers de formes filtrées individuellement. Simulez les lueurs avec quelques larges traits à faible alpha ou un sprite mis en cache. Testez de manière vigilante une scène lourde (limite RSS) avant que l'utilisateur ne l'ouvre. Un seul processus lourd à la fois. Ne reconstruisez jamais l'audio ou les événements pendant qu'un rendu s'exécute.
  • Si une scène dessine sur un canvas, restaurez l'état (save/restore, réinitialisez globalAlpha) dans chaque fonction d'aide. Un alpha qui fuit provoque un scintillement.
  • Une démo de produit dans le film est un accessoire : interface scriptée, enregistrée ou simulée, jamais en direct.

Musique (references/music.md), valeurs par défaut que l'utilisateur peut modifier ; elles s'appliquent aussi à la partition temporaire

  • Niveau fixe sous la voix, pas de réduction de volume dynamique, environ 10 dB en dessous de la parole. Les couches ajoutent de la couleur, pas du volume.
  • Pas d'arpège ou de remplissage rythmique sous la narration. Nappes, basses, un thème, des crescendos, des silences.
  • Les coupures vers le silence sont sèches, avant la réverbération, pour que la pièce résonne.
  • La partition temporaire et les bruitages sont synthétisés en Python sur l'horloge de events.json, avec zéro gros téléchargement. La bibliothèque d'échantillons attend la passe U3.

Processus

  • Windows : lisez d'abord la section Windows de references/setup.md. Mettez les chemins entre guillemets, conservez les scripts shell générés en format LF, gardez le chemin du projet court.
  • Petits commits, un par tour révisé. Staguez les chemins explicites. Ne commitez pas les prises brutes, les modèles, les échantillons, node_modules ou les rendus. Proposez un .gitignore.
  • Bandos de révision : uniquement lorsque l'utilisateur le demande. Encodez uniquement les segments modifiés avec 2 s de contexte, en 720p30, avec audio.
  • Garde-fous de construction : refusez d'assembler la version finale si le mix a changé après l'export de ses images, et refusez de construire pendant qu'un rendu s'exécute. Appliquez dans le code (fichier de verrouillage, hachage à côté de l'export), pas par une promesse.
  • Mettez en cache les étapes coûteuses (alignement, synthèse, stems) indexées par le hachage d'entrée.

Quand quelque chose se passe mal

Lisez d'abord references/lessons.md. Pièges connus : les dé-positeurs qui mangent les plosives, un mix obsolète servi depuis le cache du navigateur, deux onglets sur un même microphone, un commentaire de fin de ligne qui avale une accolade fermante, un casque audio spatial qui fait sonner un mix stéréo comme mono.

Fichiers

  • references/workflow.md : l'animatic et chaque passe d'amélioration, les portes, la victoire rapide
  • references/events-schema.md : le format et les règles de events.json
  • references/motion-canvas.md : configuration du projet, scènes pilotées par les événements, prévisualisation, export, garde-fou de performance
  • references/music.md : synthèse de la partition temporaire et des bruitages, MIDI sur une horloge, échantillons, mix
  • references/voice.md : règles pour la voix du script, TTS de maquette, enregistrement, choix, montage
  • references/lessons.md : rétrospective distillée
  • references/setup.md : amorçage, valeurs par défaut avec commandes d'installation, animator.config.json
  • scripts/check_env.sh, scripts/check_env.ps1 : rapport d'outillage compact (idempotent, lecture seule)
  • templates/ : events.example.json, events.ts de Motion Canvas et squelette de scène

Skills associés