Animate

Que fait Animate ?

Vous créez des vidéos animées courtes en code : une <canvas>, dessinée et mise en musique procéduralement, déterministe image par image, rendue avec un navigateur sans tête et ffmpeg. L'histoire suit une grammaire étudiée à partir de l'animation courte de qualité ; le rendu est un style — un kit enfichable choisi dans styles/ ou créé à partir des références de l'utilisateur avec new-style.md.

Prérequis : Node 18+, Playwright avec Chromium (npm i -g playwright && npx playwright install chromium), ffmpeg dans le PATH. Vérifiez-les d'abord ; si l'un manque, indiquez à l'utilisateur la commande d'installation et arrêtez-vous. Pour une voix off, Python avec faster-whisper (pip install faster-whisper) chronomètre chaque mot ; sans cela, les durées des mots sont estimées.

Tous les chemins ci-dessous sont relatifs au répertoire de base de cette compétence. Les morceaux vivent dans le projet de l'utilisateur sous pieces/<nom>/ (créez pieces/ si nécessaire) ; les styles créés par l'utilisateur résident dans <projet>/styles/<nom>/.

Non-négociables

1. Pas d'animation avant l'approbation du storyboard. Les points de contrôle existent parce qu'une histoire ou un rendu erroné coûte une construction complète.
2. Regardez les références avant de dessiner quoi que ce soit — celles de l'utilisateur, ou le sample.png et la démo du style. Ensuite, vérifiez chaque image clé par rapport à grammar/FRAME.md et à la propre checklist du style dans son STYLE.md.
3. Toute affirmation factuelle à l'écran est vérifiée par une recherche web et listée avec sa source dans le brief. Ne dites jamais « premier » sans source.
4. Fichier unique, tout en code : un seul index.html ; tout est dessiné et synthétisé en code — pas de fichiers image/audio/vidéo, pas d'URI data:, pas d'URL, pas de polices web dans le code. tools/build.mjs l'applique. Deux exceptions optionnelles, toutes deux propres à l'utilisateur : actifs (captures d'écran et logos dans <piece>/assets/, intégrés par la construction) et une piste musicale (ajoutée à l'exportation). Voir Actifs et Musique ci-dessous.
5. Déterministe : aléatoire avec germe uniquement (RNG(...)), l'indice d'agitation B pour la variation par étape. Jamais Math.random() ou l'heure système.
6. Les médias de référence restent locaux. Ne les engagez jamais, ne copiez pas leur code, et ne nommez pas leur artiste dans la sortie publiée sauf si l'utilisateur demande à le créditer.
7. « Fait » est mesuré : tools/review.mjs réussit et vous avez consulté les planches contact. Rapportez les chiffres, pas « ça a l'air bien ».
8. Demandez avec des options. Utilisez AskUserQuestion avec une valeur par défaut recommandée en premier, afin que l'utilisateur puisse répondre en un clic.

Le flux

0. Entretien

Posez les questions de intake.md — uniquement celles que vous ne pouvez pas déduire. Pour le rendu, construisez la galerie (node tools/gallery.mjs <out.png> [<project>/styles], environ 3 secondes), montrez-la et demandez : lequel de ceux-ci, ou montrez-moi une référence ? Étudiez ensuite vous-même les références par rapport à FRAME.md et à la checklist du style.

1. Vérification de l'histoire (texte, rapide)

Choisissez le format dans grammar/FORMATS.md — le moteur d'intrigue le décide (une histoire est une chronologie reliée par des morphoses ; une mission coupe sur le temps ; une liste est un catalogue). Lisez grammar/STORY.md. Vérifiez les faits sur le Web. Montrez ensuite à l'utilisateur :

• l'idée en une ligne et le dispositif narratif (« l'étincelle gagne un rayon à chaque époque et finit comme la réponse »)
• le format et pourquoi, le style, la durée, le BPM
• un tableau des temps numéroté : heure, ce qui se passe, la transition vers le temps suivant, le rôle du son (où est le silence, où est le coup le plus fort)

Demandez : approuver / modifier les temps / angle différent. Réviser jusqu'à approbation. C'est là que « Je voulais dire X, pas Y » est attrapé à peu de frais.

2. Vérification du rendu (2 à 4 images de style)

Démarrez le morceau dans pieces/<nom>/ : copiez piece.json et src/ de la démo du style (styles/<nom>/demo/) — elle parle déjà le kit du style et relie les époques par une morphose — ou à partir de templates/beat-cut/ pour un morceau qui coupe fort sur le temps (croches, une ruée de doubles croches sur les images impaires, une époque par plan, cadrages depuis des caméras), ou templates/piece/ pour la morphose cut-paper la plus simple. Définissez "style" dans piece.json, puis écrivez brief.md et LOG.md à neuf (ceux du modèle sont des espaces réservés).

• Un style livré : lisez son STYLE.md et sa démo et dessinez avec son kit.
• Les références de l'utilisateur : suivez new-style.md. Mesurez les références d'abord (tools/measure/refs.mjs) ; les propres images de style du morceau sont les images appariées, donc c'est un point de contrôle : les planches de comparaison et les images ensemble. Sauvegardez le dossier de style après l'approbation du morceau (le morceau devient son « prouvé sur »).

Dessinez 2 à 4 des temps les plus différents sous forme d'images pleine taille. Chacune doit passer FRAME.md et la checklist du style. Rendez-les côte à côte avec node tools/still.mjs pieces/<nom> 2.25,9.75,16.5 look.png --scale 0.5 (ou tools/storyboard.mjs avec TIMELINE.board défini sur ces temps), et montrez l'image. Demandez : pouce en l'air par image / changer le rendu / essayer un autre style.

3. Vérification du storyboard (chaque temps)

Dessinez chaque temps dans le rendu approuvé. Remplissez TIMELINE.board avec un temps clé par beat ({ t, title, sound, next }) et rendez le tableau. Demandez pouce en l'air/bas par numéro de panneau et notes ; redessinez ce qui est baissé ; répétez. Les panneaux sont les propres fonctions de scène de la vidéo, donc rien n'est redessiné plus tard.

4. Construction

1. Écrivez pieces/<nom>/brief.md (spécifications, style, temps, transitions, plan sonore, affirmations + sources). Tenez un LOG.md.
2. Animez les scènes : actions minutées avec TT, ev(t, d), popS(t), apparitions (voir craft.md → Motion). Câblez les époques, caméras et transitions dans src/bridges.js (formats reliés par morphose) ou laissez BRIDGES = [] pour des coupures franches.
3. node tools/build.mjs pieces/<nom> → index.html (le kit du style est extrait de piece.json "style").
4. Testez les tuiles pendant la construction : node tools/tile.mjs pieces/<nom> tile.png <images...> — regardez-les ; tuilez sur chaque morphose et coupure.
5. Marquez la partition dans src/score.js (voir craft.md → Son).
6. node tools/export.mjs pieces/<nom> --share → images, audio.wav, pistes, renders/final.mp4, renders/share.mp4 (--formats 9:16,1:1,16:9 pour chaque format ; --blur 4 pour le flou de mouvement sur les styles à 1 image). Itérez le mix avec --only-audio (ré-rend la partition et la remuxe, environ 4× plus rapide).
7. node tools/review.mjs pieces/<nom> → planches contact par plan, grille de coupure, grille de morphose, arc narratif, ancrage, texte (coupé / superposé / sous l'interface utilisateur du téléphone) et son (le moment le plus fort, le silence avant, LUFS). Corrigez jusqu'à ce que ça passe, visualisez les planches, écrivez un tableau PASS par plan dans LOG.md. Faites confiance à la vérification du texte plutôt qu'à votre œil : une étiquette recadrée a l'air bien sur une planche contact.

5. Livraison

Envoyez renders/share.mp4. Dites en quelques lignes : ce que c'est, les chiffres des vérifications, ce que la revue a attrapé et corrigé, le plan le plus faible, et ce que vous n'avez pas vérifié (par exemple, vous ne pouvez pas écouter la partition). Demandez ce qui devrait changer : histoire, rendu, transitions, rythme, son.

6. Apprentissage

Après chaque exécution, ajoutez à LOG.md du morceau. Si quelque chose de nouveau a mal tourné ou a bien fonctionné, proposez une règle d'une ligne pour craft.md, le STYLE.md du style ou un changement de kit, et ajoutez-la lorsque l'utilisateur est d'accord.

Voix off (optionnel)

Demandez lors de l'entretien (question 3). Avec une voix, la voix est l'horloge : chaque temps commence environ 0.3 s après la fin de la phrase précédente, et les grands moments tombent sur des mots parlés. Le script est le storyboard : une ligne par temps.

1. Écrivez le script dans pieces/<nom>/voice/script.json : { "lead": 1.2, "tail": 1.8, "lines": [{ "id": "open", "text": "Comme c'est dit.", "after": 0.45 }, ...] }. Écrivez les nombres et les noms comme ils doivent être prononcés. Gardez-le ≤ 3.5 mots/s ; donnez à une ligne un after plus long là où l'image a besoin de temps pour s'imposer (un compte, une légende, le silence avant le dénouement).
2. Construisez avant que la voix n'existe : node tools/voice.mjs pieces/<nom> --scratch fabrique une voix de temporisation avec la synthèse vocale du système d'exploitation (ne l'expédiez jamais), de sorte que l'ensemble du morceau puisse être animé et revu.
3. Les prises : un fichier par ligne, sauvegardé sous voice/<id>.mp3 avec "file" défini sur la ligne.
   • Le connecteur ElevenLabs (si l'utilisateur l'a : Paramètres de Claude → Connecteurs → ElevenLabs, connecté avec OAuth, sans clé API) : trouvez 2 à 3 narrateurs qui correspondent avec sa recherche vocale, générez une ligne pour chacun (une variation chacun, pas quatre), laissez l'utilisateur choisir, puis générez chaque ligne une fois avec cette voix et ce modèle. Le résultat de la génération donne un lien de téléchargement à courte durée de vie par prise : sauvegardez chacun dans voice/. Cela coûte environ un crédit par caractère ; dites le total avant l'exécution complète. Si le connecteur a été ajouté pendant la session, ses outils peuvent n'apparaître qu'après le redémarrage de l'application.
   • L'enregistrement propre de l'utilisateur, un fichier par ligne (ou coupé d'une seule prise).
   • Ne récupérez jamais une voix depuis un site que l'utilisateur n'a pas indiqué, et ne clonez jamais une voix sans le consentement de son propriétaire.
4. node tools/voice.mjs pieces/<nom> → voice/voice.wav (les lignes avec leurs pauses) et voice.json (le début et la fin de chaque ligne et mot, entendus dans l'audio par faster-whisper, localement). La construction l'injecte sous VOICE.
5. Dans l'en-tête : VL(id) est une ligne, VW(id, word, n) lorsque son n-ième word commence ; les beats commencent au t1 + 0.3 de la ligne précédente ; TIMELINE.narration vient de VOICE.lines et DURATION de VOICE.duration. Indice : les écritures et les flashs sur les mots qui les nomment. Placez le coup de dénouement dans une pause avant la ligne qui le nomme : un coup sous la parole est atténué.
6. piece.json : "voice": { "file": "voice/voice.wav", "music": -12 }. L'exportation mixe la voix sur la partition (la partition à music dB, encore atténuée pendant que la voix parle) jusqu'à −14 LUFS. La revue juge l'arc narratif et la fenêtre de dénouement sur la partition seule (renders/audio-score.wav ; une voix est plus forte que n'importe quel coup) et la voix avec sa vérification NARRATION.
7. Re-prises et modifications du script : remplacez le fichier d'une ligne (ou éditez son texte), relancez voice.mjs, reconstruisez : les scènes indexées depuis VOICE bougent avec elle. Un mot changé peut orpheliner une indication qui pointe vers lui ; vérifiez ces temps.

Musique : la piste propre de l'utilisateur (optionnel)

Demandez lors de l'entretien (question 6). Sans piste, la partition est composée en code sur une grille à 120 BPM. Avec une :

1. Placez-la dans le morceau : pieces/<nom>/audio/track.wav (WAV, MP3 ou M4A), et dans piece.json : "music": { "file": "audio/track.wav", "start": 12.0, "gain": 0, "fade": 0.5 } (start = où dans la chanson le morceau commence).
2. node tools/beats.mjs pieces/<nom>/audio/track.wav pieces/<nom> --start 12 --dur <durée du morceau> → beats.json : le tempo, le premier temps, chaque temps et mesure, les coups les plus forts, le moment le plus fort et les chutes. Passez --bpm 128 si l'utilisateur connaît le tempo ; vérifiez sa ligne « autres tempos » sinon (le double / moitié / deux tiers du temps est l'erreur habituelle).
3. La construction l'injecte sous BEATS ; l'en-tête de démarrage lit BPM et GRID0 depuis elle, et onBeat(t) accroche un temps sur la grille de croches de la chanson. Placez les coupures, morphoses et indications sur onBeat(...). La chanson décide de l'arc : placez le tournant sur une chute (BEATS.quiet) et le dénouement sur son coup le plus fort (BEATS.loudest, BEATS.hits), pas là où une partition composée les aurait mis.
4. La partition (src/score.js) ne conserve que les effets sonores (to = 's') : l'exportation remplace le bus musical par la piste, mixe la piste d'effets par-dessus et normalise à −14 LUFS. La grille de la revue utilise TIMELINE.gridOffset ; sa section SOUND indique si le moment le plus fort tombe dans l'acte de dénouement.
5. L'aperçu du navigateur joue toujours la partition composée (pas de fichiers audio dans la page) ; l'exportation a la piste.

Actifs : captures d'écran et logos réels (optionnel)

Demandez lors de l'entretien (question 7) lorsque le sujet est un produit. Ensuite :

• node tools/capture.mjs <url> pieces/<nom>/assets/home.png [--selector "css"] [--full] [--dark] [--hide "css"] capture l'écran du propre site de l'utilisateur (une page, une section, le logo). Demandez avant de capturer quoi que ce soit qu'il ne possède pas. Les fichiers de logo qu'il vous donne vont aussi dans assets/ (PNG, SVG, JPG, WEBP).
• tools/build.mjs intègre tout ce qui est dans assets/ dans index.html (le morceau reste un seul fichier, et le canvas reste lisible par les vérifications) ; window.renderFrame apparaît une fois les images décodées, et chaque outil l'attend.
• Dessinez-les avec drawAsset('home.png', x, y, w, h, { fit: 'cover' | 'contain', r }) dans le propre cadrage du style (une photo en papier déchiré, un cadre encré, une carte imprimée) afin qu'elles appartiennent au rendu. asset(name) retourne l'image.
• Interface utilisateur de produit réel uniquement : animez les écrans réels (recadrage, zoom avant, révélation, pointer vers eux avec le héros) ; ne dessinez jamais un écran factice comme s'il s'agissait du produit. Échantillonnez les couleurs de la marque à partir des captures d'écran.

Formats : un morceau, plusieurs proportions (optionnel)

Demandez lors de l'entretien (question 2, sélection multiple). Listez-les dans piece.json "formats": ["9:16", "1:1", "16:9"] (le premier est le principal). L'en-tête du démarreur lit ?format= et définit W, H, SAFE et CX ; les scènes placent les choses avec LX(fraction), LY(fraction) et les dimensionnent avec UNIT, et choisissent une disposition différente avec PORTRAIT / WIDE là où une proportion l'exige (une colonne de trois en 9:16, une rangée de trois en 16:9). Ne recadrez jamais un rendu 9:16 en 16:9.

• node tools/export.mjs pieces/<nom> --formats 9:16,1:1,16:9 --share → renders/final.mp4 (principal) et final-<w>x<h>.mp4 pour les autres.
• Revoyez chacun : node tools/review.mjs pieces/<nom> --format 16:9 (et tile / still / textcheck / storyboard prennent --format aussi). La vérification du texte est la plus importante ici : une légende large qui tient en 16:9 peut déborder en 9:16.

Mouvement : ressorts et flou

• Ressorts (kit/core.js) : springMove(t0, a, b, SPRING.snappy) déplace une valeur avec un léger dépassement et un stabilisation ; springTrack([[t, v], ...]) suit une valeur à travers plusieurs cibles sans saut. Préréglages : snappy (interface utilisateur), smooth (cartes, caméra), heavy (grands caractères, logos), playful (mascottes). Forme fermée, donc les images restent déterministes. Les styles sur 2 images les échantillonnent toutes les 2 images, comme il se doit.
• Flou de mouvement : export.mjs --blur 4 fait la moyenne de 4 sous-images par image — uniquement pour les styles sur 1 image (STYLE.ones : mathématiques, isométrique) ; les rendus dessinés à la main sur 2 images sont nets intentionnellement (l'exportation avertit).