手绘动画短片 Skill

Court métrage d'animation dessiné à la main

Le pipeline complet : chaque image est une fonction pure de t (secondes), dessinée avec des pinceaux (lignes à l'encre, aplats, aquarelle, hachures). Chrome headless rend les images en parallèle, puis ffmpeg les assemble en MP4. Les exceptions sont les fluides et le sable : l'image dépend d'un état simulé entre les images, donc le rendu est séquentiel du début à la fin. Aucune image n'est générée par IA, tout est dessiné par du code.

Huit moteurs :

Style	Moteur	Point de départ
Aquarelle, encre de Chine (les hachures peuvent donner un effet gravure localisé)	p5.js + p5.brush, la vitesse varie beaucoup selon la complexité de la caméra	ClaudeAnimationBase (MIT)
Craie, livre d'images, bande dessinée	2D canvas pur, 10–50 ms par image	crayon-kit/ de ce dépôt, voir crayon.md
Ombres chinoises, silhouettes, théâtre d'ombres	2D canvas pur, 2–10 ms par image, sons de gongs et tambours générés par code	piying-kit/ de ce dépôt, voir piying.md
Combat à l'encre de Chine (style Wushan)	2D canvas pur, 20–100 ms par image	inkfight-kit/ de ce dépôt, voir wushan.md
Vidéo explicative scientifique (schémas, sous-titres, voix off)	2D canvas pur, 60–130 ms par image, effets sonores générés par code, voix off edge-tts	explainer-kit/ de ce dépôt, voir explainer.md
Série de gravures (sérigraphie, eau-forte, cyanotype, trames, etc.)	SVG, ~1 s par image, rendu parallèle multi-voies ; musique avec Tone.js + échantillons d'instruments réels	prints-kit/ de ce dépôt, voir prints.md, music.md
Encre fluide abstraite (pilotée par notes de musique)	WebGL2 fluide stable, ~65 ms par image, rendu séquentiel uniquement	fluid-kit/ de ce dépôt, voir fluid.md
Sable animé (lumière traversante, une image effacée pour la suivante)	WebGL2 heightfield, ~90 ms par image minimum, rendu séquentiel uniquement	sand-kit/ de ce dépôt, voir sand.md
Dessins sur cahier d'écolier (stylo bille, crayon de couleur, papier photo)	2D canvas pur, page entière pré-rendue en texture, 2–10 ms par image	doodle-kit/ de ce dépôt, voir doodle.md
Montage cut-up (relais de styles)	Node + @napi-rs/canvas pour générer les images directement, pas de navigateur	montage-kit/ de ce dépôt, voir montage.md

Œuvre de référence : PDoomVideo, un clip de 2 min 30 généré par Claude dans Claude Code. Ce dépôt n'a pas de licence : on peut étudier le code, pas l'utiliser pour publier. ClaudeAnimationBase est une base MIT publiée plus tard par le même auteur.

Environnement

• Ce skill provient du dépôt paint-video-skill. Les dossiers crayon-kit/, piying-kit/, inkfight-kit/, explainer-kit/, prints-kit/, fluid-kit/, sand-kit/, doodle-kit/, montage-kit/, examples/, tools/ se trouvent dans ce dépôt, pas dans le répertoire du skill ; si vous ne les trouvez pas localement, demandez à l'utilisateur où le dépôt est cloné, ou clonez-le à nouveau.
• Node 22.12 ou supérieur, Chrome ou Chromium (sinon passez --chrome=<chemin> à render.mjs ou définissez CHROME_PATH), ffmpeg dans le PATH.
• L'outil de sous-titres nécessite Python 3 avec numpy et Pillow.
• npm install télécharge et exécute du code tiers ; demandez d'abord à l'utilisateur. Pour un nouveau projet, copiez le répertoire modèle déjà installé (y compris node_modules) pour éviter de réinstaller à chaque fois.

Étapes de démarrage (aquarelle / encre)

1. Copiez la base dans le nouveau répertoire de projet, en excluant out, docs, .git. Sous Windows : robocopy <base> <nouveau_répertoire> /E /XD out docs .git /XJ ; le code de sortie 1 indique une copie réussie.
2. Lisez d'abord ANIMATION_GUIDE.md dans le nouveau répertoire. C'est le guide complet avec les règles et l'API : paint(), inkLine(), la caméra, les transitions, tous les paramètres de clawd(). Pas de répétition ici.
3. Écrivez d'abord STORYBOARD.md et faites-le valider par l'utilisateur avant d'écrire le code. Suivez le format du guide : résumé d'une phrase, univers et palette, motif conducteur, arc émotionnel, tableau des « beats » par plan. Avant d'écrire, lisez le directing.md du même répertoire (manuel de mise en scène : échelles de plans, axe, points de coupe, rythme, composition, jeu d'acteur). Rédigez le tableau des plans selon son format, puis vérifiez-le avec sa checklist finale.
4. Modifiez la durée et le bpm dans src/config.js. Créez la scène comme un nouveau fichier src/scenes/<nom>.js, enveloppé dans une IIFE, terminé par shots([...]). Dans studio.html, remplacez la ligne demo.js par votre fichier.
5. Travaillez plan par plan ; après chaque plan, utilisez la boucle de vérification ci-dessous.
6. Export : node render.mjs --clip --out=out/video.mp4. Pour les durées plus longues, utilisez --frames --workers=4 pour le rendu parallèle, puis --encode pour l'assemblage.

Le dossier examples/brush/ de ce dépôt contient deux scènes complètes et exécutables : stars.js (« Ramasser une étoile », 14,5 s, bpm 90) et ink.js (« Signature », encre, 16,8 s, bpm 80). Placez-les dans src/scenes/, remplacez demo.js dans studio.html, et mettez à jour config.js avec les durées et bpm indiqués. Inspirez-vous de l'écriture, ne copiez pas l'histoire.

Deux correctifs appliqués à la base (deux paramètres ffmpeg et un paramètre Chrome dans render.mjs) :

• Sortie en gamme TV standard : remplacez '-pix_fmt', 'yuv420p' par '-vf', 'scale=out_range=tv,format=yuv420p', '-color_range', 'tv'. Sinon certains lecteurs affichent du noir complet.
• Sur les PC portables Windows avec double carte graphique, ajoutez --force_high_performance_gpu, sinon Chrome utilise le GPU intégré et ralentit progressivement. crayon-kit/render.mjs inclut déjà ces deux correctifs.

Règles les plus importantes

Applicables à tous les styles

Les points où le modèle échoue le plus souvent en animation :

• L'image est une fonction pure de t : les images sont rendues en parallèle et dans le désordre, donc pas d'état entre les images, pas de Math.random() ; les valeurs aléatoires sont toutes issues du temps et de l'identifiant de l'élément.
• 2D pur, pas de projection 3D : la profondeur est suggérée par l'occlusion, la taille et la température de couleur.
• Pas de texte : pas d'étiquettes, d'enseignes, de bulles de dialogue avec du texte dans l'image. Exprimez tout visuellement, avec des émotes (!, ?, gouttes de sueur, ampoule). Les paroles chantées d'un clip sont une exception : elles forment une couche séparée superposée, voir la section sous-titres de mv-workflow.md.
• Chaque plan doit raconter un événement : à chaque instant, le spectateur ne doit suivre qu'une seule chose. D'abord la cause, puis la réaction.
• Le timing est le point le plus fréquent d'échec : le spectateur ne voit la scène qu'une fois. Laissez à chaque « beat » le temps d'être repéré, compris et digéré. Rapide pour l'action, lent pour le sens. La première version est presque toujours trop rapide.
• Chaque raccord doit être une transition : y compris le début et la fin, pas de coupe franche ni d'arrêt brusque. Les transitions doivent être liées à l'histoire, pas toujours les mêmes. Exception pour les scènes de combat : les plans s'enchaînent directement au milieu de l'action, sans transition décorative, voir wushan.md.
• Les personnages doivent être grands : en 1080p, un plan moyen occupe environ 1/3 à 1/2 de la hauteur de l'image, un gros plan de visage doit dépasser la moitié de la hauteur. Moins de 1/10 est réservé aux plans d'ensemble. La signification des tailles varie selon les moteurs, ne mélangez pas les valeurs.

Spécifique à p5.brush (aquarelle / encre)

Extrait de ANIMATION_GUIDE.md de la base :

• Utilisez hash(i) pour les valeurs aléatoires fixes, jit() pour les tremblements de ligne. Appelez boilSeed(key) au début de chaque élément indépendant, sinon un élément en mouvement fera trembler tout ce qui est statique derrière.
• Tout est dessiné avec des pinceaux : utilisez uniquement paint() et inkLine(), pas les rect, ellipse, fill() natifs de p5, ça ressemblerait à du Flash des années 2000.
• Les changements de direction se font par des vues clés pré-dessinées (turn()).
• clawd() u : plan moyen 20–28, gros plan 40–70, moins de 12 réservé aux plans d'ensemble.

L'API, les nombres aléatoires et les tailles de personnages pour le moteur craie sont différents, voir crayon.md.

Esthétique par défaut

Quand l'utilisateur ne donne pas de style, utilisez celle-ci. Elle penche vers le « papier et encre » : couleurs chaudes et peu saturées, traces faites à la main, animations discrètes. Si l'utilisateur a ses propres indications de style, ce sont elles qui priment.

Palette : écrasez la palette dans l'en-tête du fichier de scène. La palette par défaut de la base est trop saturée (bleu ciel, violet, rose) :

Object.assign(PAL, {
  paper: '#f7f2e6', cream: '#faf7f0', ink: '#2e2a24',
  clay: '#bb5f3c', clayDk: '#8f4428', clayLt: '#d98a6c',   // Terre cuite ; le corps de Clawd est en clay
  sky: '#a9bfc4', sap: '#8a9a6a', ochre: '#c9a25a', teal: '#6f9590',
  rose: '#c98a8a', indigo: '#4a5670', night: '#262a38', violet: '#7d6f8f'
});

Choisissez 3 à 5 couleurs par vidéo, pas toutes. Les couleurs doivent suivre un arc narratif, par exemple d'un début froid et sombre vers une fin chaude et lumineuse.

Texture : la base inclut déjà un grain de papier, conservez-le. Les hachures (hatch) conviennent pour un effet de gravure, mais uniquement sur les ombres et localement, pas sur toute l'image.

Riche ≠ bon marché :

• Vous pouvez être vivant : beaucoup d'éléments peuvent bouger dans un plan, c'est une image « spectaculaire ».
• Pas de cheap : n'ajoutez pas de confettis, d'étoiles ou d'étincelles juste pour remplir. Chaque effet spécial doit être un élément de l'histoire (des étoiles qui tombent, une lumière qui s'allume).
• Auto-vérification : si vous enlevez un élément, est-ce que l'image perd du sens ? Si elle perd seulement de l'animation, supprimez-le.
• Retenue n'est pas vide : un blanc doit avoir des niveaux. L'image doit montrer l'environnement, des plans avant/arrière/milieu, de la texture. Pas juste un fond de papier uni avec deux ou trois objets isolés. Le spectateur ne regarde qu'une chose à la fois, mais cette chose doit vivre dans un monde qui respire.

Les traits doivent ressembler à du dessin à la main : pour les personnages, les aplats avec lignes à l'encre sont acceptables, mais les lignes ne doivent pas avoir la même épaisseur partout : faites varier sw dans inkLine(pts, sw, colour, brush) selon la distance et l'importance, utilisez les pinceaux 'inkfine' et 'dry' pour les détails. Pour le fond et l'environnement, utilisez fill et wash pour créer des couches humides et sèches. Si tout est fait avec le même trait noir épais et des aplats, ça ressemblera à un collage.

Une contrainte immuable : chaque vidéo doit définir une constante qui traverse tout le film, comme une même position de composition, une même forme, une même pose de personnage. Les transitions et les raccords s'articulent autour d'elle. La fin fait écho au début.

Musique et rythme : tout dans la base est calé sur le bpm. Sans musique, prenez un bpm lent (80–100) pour un rythme posé.

Leçons tirées des tests

« Ramasser une étoile » (examples/brush/stars.js)

Clawd tient un pot vide pour attraper des étoiles qui tombent, la lumière des étoiles réchauffe peu à peu la nuit.

• Désactivez les émotes manuellement : les émotions excited et proud de la base font apparaître automatiquement des étincelles (spark) autour de la tête, c'est une décoration bon marché. Utilisez emotions(t, [[0, 'excited', { emote: null }], ...]) pour les désactiver. Vous pouvez conserver les réactions significatives comme !, ?, les cœurs.
• « Réchauffer » ne veut pas dire transformer tout le ciel en couleur chaude : si le fond de la nuit tire directement vers le brun-jaune, l'image devient une teinte terreuse et sale. Gardez le ciel nocturne, atténuez seulement les couleurs froides (vers #4b4356), mettez la chaleur dans les halos d'horizon et les objets lumineux.
• Les accessoires doivent être immédiatement reconnaissables : le pot en verre sur fond sombre, dessiné en gris, ressemblait à une poubelle. Peignez-le en verre clair et froid avec un reflet pour qu'on le reconnaisse.
• La fermeture du cercle (iris out) doit se faire en trois temps : d'abord se refermer sur le sujet, marquer une pause, puis se fermer complètement. Une fermeture en un seul mouvement ressemble à un écran noir soudain.
• Les bras de Clawd sont très courts : il ne peut pas attraper ce qui est au-dessus de sa tête ; lever les bras donne l'impression de porter quelque chose sur la tête. Pour « tenir dans les mains », il faut dessiner une animation de portage.
• Vitesse réelle : 14,5 s, 348 images, 4 processus en parallèle en ~6 minutes, ~1 s par image (RTX 4060 portable), encodage ffmpeg en 10 s. La planche-contact (contact sheet) coûte 0,1–1,7 s par image, c'est très rapide, faites plusieurs vérifications.

« Emprunter la rosée » (contre-exemple)

Un escargot transporte de la rosée pour sauver une jeune pousse desséchée. Toutes les règles ont été respectées (pas de texte, pas d'étincelles, palette correcte, personnages sans déformation), mais le film est raté :

• Le changement d'état dans l'histoire doit être exagéré au point d'être évident : la pousse est à peu près aussi vigoureuse du début à la fin. La différence « tête baissée par manque d'eau → redressée après avoir bu » n'est pas visible, donc toute l'histoire n'a ni cause ni effet. Mettez côte à côte l'image avant et après le changement : si même un non-expert ne voit pas la différence, ce n'est pas assez, exagérez jusqu'à ce que ce soit flagrant.
• L'accessoire qui fait avancer l'histoire doit être au moins aussi gros que la tête du personnage : la goutte de rosée est plus petite que l'œil de l'escargot et de couleur pâle ; une fois sur sa coquille, elle devient invisible. Si l'accessoire est petit, rapprochez la caméra, ou ajoutez un contour lumineux.
• Si le storyboard dit « déplacement », l'image doit vraiment se déplacer : le storyboard disait que l'escargot portait la rosée jusqu'à la racine, mais le déplacement réel était minime, l'image restait quasi statique. Vérifiez plan par plan : « qui va d'où à où ».
• L'image était trop vide : seulement une pousse, un escargot, une feuille. Voir plus haut : « retenue n'est pas vide ».
• Les transitions doivent avoir une raison d'être : une bande de couleur verte sans rapport avec l'histoire qui balaie l'écran n'est qu'un cut déguisé.

Auto-vérification après écriture : mettez côte à côte la première et la dernière image de chaque plan. Si on ne peut pas dire ce qui a changé dans ce plan, l'histoire est ratée : revenez en arrière et amplifiez l'événement.

« Signature », encre (examples/brush/ink.js)

• Changer de style ne nécessite que de changer la palette et la méthode de dessin, pas la base : tout le film utilise trois nuances d'encre de Chine plus le vermillon de Clawd. « Un point rouge dans une mer d'encre » est un classique de l'encre de Chine, et Clawd incarne ce point.
• L'encre s'étale : chaque point d'une forme part du point de dépôt de l'encre et s'étale en fonction de la distance (avec bloom()), ce qui ressemble plus à de l'encre qui s'étale sur du papier qu'à une simple apparition en fondu.
• Les couches de l'encre : d'abord un fond clair, puis une couche d'encre plus foncée sur les sommets qui s'estompe vers le bas, une brume de couleur papier au pied de la montagne, et les montagnes lointaines se déplacent plus lentement (parallaxe).
• Le monde apparaît trait par trait derrière le personnage : quand il se déplace, les roseaux, la rivière et les pierres se dessinent derrière lui. L'événement lui-même est le dessin. Cela garantit aussi que chaque plan a un changement visible entre sa première et sa dernière image.
• La contrainte de composition doit aussi tenir compte du point d'arrivée : pour que le personnage voie la route devant lui, il doit se tenir du côté opposé à la direction du mouvement, et à la fin il se retrouve naturellement dans le coin correspondant de l'image.

Deuxième style : craie et livre d'images

Si l'utilisateur veut un style enfantin, livre d'images, craie, bande dessinée, ou ne veut plus d'aquarelle, lisez le fichier crayon.md du même répertoire. Ce style n'utilise pas p5.brush, mais un moteur 2D canvas écrit sur mesure (crayon-kit/), environ 10 fois plus rapide que l'aquarelle. Il contient : principes du moteur et API, paramètres des personnages, gags de transformation et de cases brisées, sous-titres en craie, et utilisation d'une sonde pour éviter les personnages avec les sous-titres.

Troisième style : ombres chinoises

Si l'utilisateur veut des ombres chinoises, des silhouettes, un théâtre d'ombres, ou une vidéo courte sans musique avec seulement des gongs et tambours, lisez le fichier piying.md du même répertoire. Le moteur est dans piying-kit/ : chaque pièce de cuir est découpée individuellement avec ses ajours, puis multipliée sur un écran translucide. Les personnages sont des marionnettes articulées avec des leviers. Les temps forts des gongs et tambours sont générés avec numpy. Le fichier contient : principes du moteur et API, paramètres des personnages, synchronisation des actions sur les temps forts, effets de miroir et de contre-jour des silhouettes, et synthétiseur.

Quatrième style : combat à l'encre (style Wushan)

Si l'utilisateur veut des combats, des arts martiaux, des scènes d'action, ou mentionne explicitement Wushan (style montagne des cinq éléments), lisez le fichier wushan.md du même répertoire. Le moteur est dans inkfight-kit/ : les personnages sont dessinés avec des lignes de pinceau à encre plus des aplats et des ombres. Les mouvements suivent des courbes lisses passant par des images clés. Les pas sont animés séparément selon les points d'appui. Les images d'impact utilisent des couleurs inversées et du vermillon. Finalement, l'encre de feu explose sur tout l'écran. Le fichier contient : API du moteur et du corps humain, comment construire un combat (d'abord définir les points de contact, puis les positions en remontant, en utilisant probe.mjs pour des valeurs numériques), placement des plans, et pièges à éviter.

Cinquième style : vidéo explicative scientifique

Si l'utilisateur veut une vidéo de vulgarisation scientifique pour expliquer une découverte ou un principe, lisez le fichier explainer.md du même répertoire. La base est explainer-kit/ (« Utiliser la lumière pour ouvrir le cerveau », prix Nobel 2026 de l'optogénétique, 3:05). Chaque section utilise un style de dessin différent. Les sous-titres, les chapitres et les annotations sont autorisés. L'image, les effets sonores et la voix off partagent un seul fichier timeline.js. Si la voix off est plus longue que l'image, la durée de l'image est étirée selon la phrase.

Sixième style : série de gravures

Si l'utilisateur veut un rendu texturé, pas un style plat minimaliste, ou mentionne spécifiquement la gravure, la sérigraphie, l'eau-forte, le cyanotype, les trames, lisez le fichier prints.md du même répertoire. La base est prints-kit/ (« Lumière lointaine », 93 s, six étapes du voyage d'une graine de pissenlit). Il détaille :

• L'horizon et la source lumineuse restent fixes pendant six étapes, la technique change à chaque étape ;
• Les méthodes SVG pour chaque technique ;
• Comment utiliser des nombres aléatoires fixes pour éviter le scintillement lors du redessin image par image ;
• Les trois éléments pour que l'image « raconte » : le héros et son compagnon, le moment de la journée, les légendes au crayon ;
• Cinq méthodes d'impression pour les transitions ;
• Le rendu multi-voies en parallèle (chaque voie utilise environ 2–3 Go de RAM, 4 voies par défaut).

Septième style : encre fluide abstraite pilotée par la musique

Si l'utilisateur veut une image qui bouge constamment, ne raconte pas d'histoire spécifique, et change au rythme de la musique, lisez le fichier fluid.md du même répertoire. La base est fluid-kit/ (« Une goutte d'encre », 91 s, classique + rock). WebGL2 fluide stable, couleurs superposées par absorbance de la peinture. La partition est exportée en tableau de notes. Chaque instrument a une méthode de dessin fixe (violon = trait, grosse caisse = impact, cymbale = floraison). Chaque section a une « fluidité » différente. Au climax, sept types d'explosions florales en alternance. Pas de personnages, pas de plans, les images ne peuvent être rendues que séquentiellement.

Huitième style : sable animé (lumière traversante, une image effacée pour la suivante)

Si l'utilisateur veut raconter une petite histoire sans personnages, avec une image qui change constamment (pas un diaporama dynamique), lisez le fichier sand.md du même répertoire. La base est sand-kit/ (« Le sablier », 75 s, une année vue par un grain de sable, neuf tableaux qui s'enchaînent). WebGL2 heightfield pour simuler le sable : jeter, tracer du doigt, pousser avec la paume, angle de talus, rideau de sable, aplatir, triangle lumineux, ouvrir la lune. La lumière de fond traverse trois canaux séparés, chaque grain fin est un point de lumière. Règle : la lumière est le personnage principal, les transitions se font par des formes qui se connectent, des blancs. L'image est définie d'abord, la musique est écrite ensuite, à 60 battements par minute, un battement = une seconde. Les images ne peuvent être rendues que séquentiellement.

Neuvième style : dessins sur cahier d'écolier (stylo bille + crayon de couleur + papier photo)

Si l'utilisateur veut un rendu « papier », « cahier », « gribouillage en classe », avec un petit personnage de dessin qui prend vie, lisez le fichier doodle.md du même répertoire. La base est doodle-kit/ (« Marge », 38 s, une petite boule dans la marge fait un tour pendant que le stylo n'est pas là). Le stylo bille a des cassures d'encre, le crayon de couleur fait des hachures obliques avec du grain de papier, la page entière a un éclairage photo. Un stylo réel avec une ombre ancre l'impression photographique. Les traits des objets vivants tremblent, ceux des objets fixes restent sur le papier. Plan-séquence, la musique suit les actions. La deuxième moitié relate l'expérience d'utiliser ce style pour un clip musical complet : pas de personnages, utiliser deux stylos et un cahier qui glisse pour représenter deux personnes.

Dixième style : montage cut-up (même forme au même point)

Si vous voulez un montage rapide de nombreuses scènes disparates avec un arrêt brutal, chaque coup plaçant la même forme au même point de l'image, lisez le fichier montage.md du même répertoire. La base est montage-kit/ (« Une bouchée », 25,8 s) : un beignet remplit l'écran, dans le trou un cow-boy galope à toute vitesse. À chaque temps, le trou change de style, le bord extérieur reprend le temps d'après, 24 styles se relaient, et à la fin on croque dedans. L'animation continue utilise un squelette commun anatomique, chaque style ne fait que dessiner. Une autre approche, « un coup = un monde », est également décrite.

Écrire sa propre musique

Si vous n'avez pas de chanson existante et devez composer la musique du court métrage, lisez le fichier music.md du même répertoire. Utilisez Tone.js avec des échantillons d'instruments réels, pas de synthétiseur. Il contient : les règles de composition, comment enlever le côté robotique, les pièges de l'échantillon VSCO2 et de sa notation d'octave, comment aligner le volume après changement de source, le cache local des échantillons, l'export hors ligne dans Chrome headless avec double normalisation du volume, et comment aligner l'image et la musique en utilisant le « temps ». Un morceau classique + rock a une section dédiée : batterie réelle multi-dynamiques (DRSKit), guitare saturée, export par pistes, et table de mixage Python personnalisée (égalisation, compression, saturation, réverbération à convolution, alignement du volume par section, limiteur).

Boucle de vérification (à faire pour chaque plan, ne sautez pas)

Lire le code seul ne montre pas le rendu animé : il faut exporter et regarder :

node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/sheet.jpg        # Planche-contact : première, milieu, dernière image de chaque plan
node render.mjs --strip=2.1:2.6 --cols=6 --w=320 --out=out/check/strip.jpg               # Images consécutives : rotation, saut, transition
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg     # Zoom local : expression, main, point de contact

Si les ms/frame de la planche-contact sont tous à 0, c'est que la page n'a rien dessiné (probablement une erreur de syntaxe dans le fichier de scène). Vérifiez d'abord le message [page error] dans le terminal.

Ouvrez avec un outil de visualisation et vérifiez point par point :

• L'événement est-il lisible ? Les personnages sont-ils assez grands ? Se distinguent-ils bien du fond ?
• Y a-t-il des images avec téléportation ou changement brusque ?
• Corps et support : quand un personnage s'assoit, se tient debout sur, s'appuie contre un objet, il doit y avoir une transition avec lever de jambe, flexion de genou, pose. Le corps ne doit pas se translater horizontalement contre l'objet ni le chevaucher.
• Longueur des membres constante : en tendant le bras pour attraper quelque chose, le bras ne doit pas s'allonger. Si c'est trop loin, le personnage doit s'approcher ou se pencher.
• Les accessoires (balancés, retournés) ne doivent pas traverser les objets de la scène.
• Les actions ont-elles une préparation et un suivi ? Les mouvements sont-ils symétriques et simultanés ?
• Y a-t-il une transition aux raccords ?
• Y a-t-il du texte ?
• Les couleurs sont-elles sales ? (du jaune superposé sur du bleu donne du vert ; pour un effet lumineux, utilisez glow()).
• La palette respecte-t-elle la teinte définie ?

Performances et bugs connus (p5.brush)

• La reprise de rendu ne vérifie que la présence des fichiers image : si vous modifiez le code puis relancez --frames, les images déjà existantes sont conservées telles quelles, ce qui mélange des anciennes et nouvelles versions dans le résultat final, sans message d'erreur. Le render.mjs de la base se comporte ainsi. Après modification du code, déplacez d'abord out/frames (ne le supprimez pas) avant de relancer. Le render.mjs de crayon-kit enregistre une signature du code dans chaque image ; si le code change, il s'arrête et vous demande de choisir --force (les anciennes images sont déplacées dans out/frames_old_*) ou --keep-frames (si vous avez déjà manuellement déplacé les images des plans modifiés).
• Erreur de page : le render.mjs de crayon-kit échoue et s'arrête en cas d'erreur de page ; celui de la base se contente d'afficher [page error] et continue à générer les images, soyez vigilant.
• La planche-contact affiche le temps par image ; objectif ≤1,5 s/image. Le fill aquarelle est le plus coûteux : utilisez wash pour les grandes formes, fill peu souvent et avec peu de côtés.
• Avec une carte graphique dédiée, comptez environ 1 s par image. Si ça ralentit nettement, utilisez node gpu_probe.mjs <chemin_chrome> pour vérifier sur quel GPU Chrome est tombé.
• studio.html charge la police Permanent Marker depuis Google Fonts, utilisée seulement par letter(). Si la vidéo ne contient pas de texte, supprimez directement la ligne <link> pour éviter de bloquer le chargement si le réseau est indisponible.
• Quand des coordonnées contiennent NaN, le message d'erreur est Failed to construct 'OffscreenCanvas', avec la pile d'appels pointant vers le code de la scène et non vers le NaN lui-même. Revenez au calcul géométrique.
• Quand la caméra zoome au-delà de 2x, les longues lignes très éloignées de l'origine peuvent se réduire à un point. Pour les très longs bords, divisez le tracé de inkLine en segments.
• Parfois, 5 avertissements WebGL: INVALID_OPERATION sont inoffensifs ; d'autres erreurs de page sont de vraies erreurs.
• Les grandes formes avec seulement fill sont presque transparentes : pour les grands éléments (montagnes lointaines, plans d'eau) de plusieurs milliers de pixels, un seul fill les rendra presque invisibles. Utilisez d'abord wash (washOp: 255, couleur éclaircie) pour le fond, puis ajoutez une couche de fill pour l'effet de dégradé et les bords.
• inkLine avec seulement deux points ne dessine rien et ne signale pas d'erreur : même une ligne droite doit avoir au moins 3 points, de préférence avec une légère ondulation pour imiter un dessin à la main. Les ondulations, traces d'eau, courtes lignes au sol sont les plus touchées.
• Ne dessinez pas la même forme en plusieurs segments : si l'ombre d'un sommet de montagne est divisée en plusieurs segments, les zones de chevauchement créeront des coutures verticales. Dessinez tout d'un seul trait, et utilisez hash(i) pour les variations de bord.
• Quand vous divisez inkLine en segments, vérifiez le nombre de points du dernier segment : la découpe peut ne laisser qu'un seul point à la fin, ce qui provoque une erreur spline() requires at least 2 points.

Long métrage ou clip musical

Lisez d'abord le fichier mv-workflow.md du même répertoire : analyse musicale, tableau des plans piloté par la mesure, bibliothèque de motifs, travail par lots, rendu par sections, retouches locales, étalonnage final, sous-titres de paroles.

Autre approche : l'agent principal écrit le storyboard et les indications de style, puis répartit les chapitres entre plusieurs sous-agents qui modifient chacun leur fichier de chapitre. Si l'utilisateur ne demande rien, faites tout du début à la fin pour une meilleure cohérence.

Pour la synchronisation des paroles et l'analyse des battements audio, vous pouvez aussi consulter paint-mv-skills (MIT, chinois).

Livraison

• Le livrable est out/video.mp4, accompagné d'une capture d'écran de la planche-contact.
• Le rapport doit mentionner trois choses : la durée totale, le temps moyen par image, et ce que vous avez découvert et corrigé lors de votre vérification. Mentionnez clairement les parties que vous n'avez pas vérifiées.