Créer une animation dont chaque image est dessinée en JavaScript (la méthode Claude Opus 5.5)

La semaine de la sortie de Claude Opus 5.5, un type de clip a tourné en boucle sur les réseaux : de courts films d'animation accompagnés d'une légende comme celle de Kevin Ngo, "Claude Opus 5.5 drew every frame of this animation in JavaScript" (« Claude Opus 5.5 a dessiné chaque image de cette animation en JavaScript »). Aucun fichier image, aucune vidéo d'archive, aucun modèle vidéo. Juste un programme qui dessine chaque image sur un canvas, et une musique synthétisée par la même page. Ce guide explique comment ces films sont fabriqués et vous donne deux façons d'en faire un : dans Claude Code avec un skill open source, ou dans le mode Animation d'iArt, sans le moindre terminal. Chaque film ci-dessous a été réalisé à partir du prompt exact indiqué.

"What actually happens in the 2 seconds after you tap your card at a checkout? 25-30s explainer for our fintech blog." C'est tout le prompt (les prompts de cette page sont reproduits dans leur version anglaise d'origine, mais l'application accepte des prompts dans n'importe quelle langue). Chaque forme, chaque étiquette et le compteur « real time since tap » qui défile sont dessinés par le code. Activez le son pour entendre la bande-son, elle aussi synthétisée en code. Le seul défaut que j'ai trouvé en regardant image par image : un éclat rouge égaré sur le bord supérieur pendant un mouvement de caméra, vers la 10e seconde.

Ce que veut vraiment dire « chaque image dessinée en JavaScript »

Une animation JavaScript de ce genre tient en une seule fonction, draw(ctx, t), qui peint l'image complète à l'instant t sur un canvas HTML. Elle ne conserve aucun état d'une image à l'autre et ne charge aucune image externe. Comme chaque image ne dépend que du temps, un navigateur headless peut sauter à l'image 1, 2, 3… et capturer chacune d'elles dans un MP4, à l'image près, quel que soit le temps nécessaire pour la dessiner.

Trois détails donnent à ces films un aspect fait main plutôt qu'un air d'économiseur d'écran :

• Un aléatoire à graine fixe. Les traits tremblent et les aplats ont l'air encrés parce que le code de dessin utilise un générateur aléatoire avec une graine fixe au lieu de Math.random(). Le tremblement est identique à chaque rendu, donc les images ne scintillent pas.
• La musique en code. La bande-son est écrite avec la Web Audio API dans la même page : batterie, basse, nappes et un son synthétisé pour chaque action. Elle est rendue hors ligne puis mixée dans la vidéo, sans aucun fichier audio.
• Une seule timeline pour l'image et le son. Les films qui donnent l'impression d'être « calés sur le temps » regroupent le tempo, la liste des plans et une liste d'événements (une porte claque, un chiffre s'affiche) dans une seule structure de données, que lisent à la fois le code de dessin et le code musical. Le son tombe pile sur l'action parce que les deux partagent les mêmes données de timing.

C'est ce qui la distingue des deux techniques avec lesquelles on la confond souvent :

Étape 1 : partir d'un sujet, pas d'un style

Les films qui ont circulé ne se ressemblent pas du tout, et c'est bien là l'intérêt. Quand nous avons testé la méthode sur quatorze films et six sujets, c'est le sujet et les mots du prompt qui ont le plus déterminé le rendu visuel. Les presets de style et les images d'exemple tiraient tout vers un seul et même look. Le modèle a aussi ses goûts maison : un fond bleu profond avec des touches ambrées revenait sans cesse, même après avoir retiré toute allusion à ces couleurs des instructions.

Dites donc de quoi parle le film, à qui il s'adresse et où il sera diffusé. Si vous voulez un rendu particulier, décrivez-le avec des mots simples (« dans le style d'un manuel de sciences des années 1950 ») plutôt que de joindre un moodboard. Si ça vous est égal, ne dites rien et attendez-vous au bleu et à l'ambre.

Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.

Essayer ce prompt dans iArt →

Une phrase en entrée, une page de manuel en sortie : figures numérotées, légendes, titre courant, ciel hachuré au crayon. La physique tient la route (les ondes bleues, courtes, sont diffusées environ six fois plus que les ondes rouges, longues). Les légendes s'écrivent lettre par lettre, si bien qu'une image mise en pause montre souvent une phrase à moitié écrite.

Étape 2 : donner la mission, la durée et le format

Dans nos tests, les prompts les plus efficaces étaient courts et précis sur la mission : la question à laquelle répond le film, le public, la durée et le format. Inutile d'écrire la liste des plans vous-même ; la planifier est la première étape de l'agent (étape 3). Ce qu'il est utile d'indiquer :

• La question ou l'histoire : « comment les casques à réduction de bruit suppriment-ils vraiment le bruit ? »
• La durée et la plateforme : « courte vidéo explicative verticale pour TikTok, ~20 s ». La plateforme lui indique aussi le ratio d'image.
• Le public visé : « pour un enfant de 2 ans » et « pour notre blog fintech » donnent un rythme et un dessin très différents.
• Les mots exacts qui doivent apparaître, le cas échéant : un nom de chaîne, un slogan. Le texte est saisi, il sort donc écrit exactement comme vous l'avez tapé.

How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.

Essayer ce prompt dans iArt →

Format 9:16, 22 secondes, trois étapes et une nuance (« best on steady hums like engines & fans », c'est-à-dire plus efficace sur les bourdonnements constants comme les moteurs et les ventilateurs), puis « Hear it. Flip it. Play it. Quiet. » Le zoom vers l'oreillette, entre 7 et 10 secondes environ, surcharge le cadre : l'arceau occupe un instant la moitié de l'écran.

Étape 3 : planifier la grille rythmique et les plans avant tout code de dessin

C'est l'étape qui fait la différence entre un film et une boucle de formes qui bougent. Avant d'écrire le code de dessin, l'agent rédige le plan sous forme de données :

1. Une grille rythmique : un tempo et des sections (intro, montée, climax, courte pause silencieuse, fin). Les coupes tombent sur les temps forts.
2. Une liste de plans avec leur mise en place : en général 10 à 20 plans, chacun avec sa position de caméra, dans un seul monde continu. Le film de la graine qui devient arbre, plus bas, est un seul monde de terre et de ciel que la caméra traverse, pas une suite de diapositives.
3. Une seule liste d'événements, lue à la fois par le code de dessin et par la musique.

Dans l'exemple open source "I only asked you to fix one line", ce plan représente 120 bpm, 15 plans et une vingtaine d'effets sonores synthétisés. La vérification de synchro a mesuré 14 coupes sur 14 calées sur le temps, et la vérification de mise en page n'a trouvé aucun texte qui se chevauche sur 300 images échantillonnées.

A 40-second film in two acts about how a seed becomes a tree: act one underground (the seed cracks, roots reach down), act two above ground (the shoot breaks through, seasons pass, a tree). Same character style in both acts, one continuous score.

Essayer ce prompt dans iArt →

40 secondes, deux actes, une seule partition. La caméra suit la graine à travers la terre, puis remonte vers la surface au fil d'une année entière de saisons. L'agent a gardé le petit visage de la graine sur le tronc jusqu'à l'arbre final. C'est un choix de l'agent, pas de la botanique.

Étape 4 : regarder le résultat en réalisateur, puis corriger avec des mots

Un modèle qui écrit des milliers de lignes de code de dessin fera des erreurs visuelles qu'il ne peut pas voir dans le code : une légende posée sur un personnage, une scène qui reste figée quatre secondes, un coup de cymbale qui fait sursauter. La méthode qui fonctionne consiste à faire le rendu et à regarder :

• Une planche contact : une image fixe toutes les demi-secondes, réunies sur une seule image. On y vérifie d'un coup d'œil le rythme, le cadrage et les temps morts (les défauts décrits sous chaque film de cette page ont été repérés ainsi).
• Des vérifications automatiques : aucune ressource chargée, pas de texte qui chevauche un autre texte ou un objet, des coupes calées sur le temps, pas de saut brusque de volume.
• Puis dites ce qu'il faut changer : « les légendes sont trop petites sur mobile », « ralentis le deuxième acte », « moins d'orange ». L'agent modifie le code et relance le rendu.

Les problèmes les plus fréquents dans les premiers jets de nos tests : des personnages aux contours épais et arrondis qui font enfantin, du texte dessiné par-dessus des objets, de longs passages où rien ne bouge, et des frappes isolées très fortes dans la musique. Une frappe au milieu d'un groove régulier passe très bien ; la même après un silence fait sursauter.

Méthode 1 : Claude Code avec le skill open source

Si vous êtes à l'aise avec un terminal, tout ce qui précède est packagé sous forme de deux skills d'agent gratuits dans iart-ai/javascript-animation-skills (MIT) : javascript-animation (la bibliothèque de dessin, le workflow de storyboard, le rendu en MP4 et les auto-vérifications) et soundtrack (la musique Web Audio sur une carte de tempo, plus la vérification de synchro).

# N'importe quel agent de code (Claude Code, Cursor, Codex…)
npx skills add iart-ai/javascript-animation-skills

# Ou en tant que plugin Claude Code
/plugin marketplace add iart-ai/javascript-animation-skills
/plugin install javascript-animation-skills

Prérequis : Node 18+, playwright-core, ffmpeg et Chrome. Aucune clé d'API. Ensuite, demandez simplement ce que vous voulez :

Make a 40-second hand-drawn explainer on why babies love black-and-white cards. Every frame in code.

Le résultat : un fichier HTML unique que vous pouvez ouvrir dans un navigateur, plus le MP4 rendu.

"I only asked you to fix one line" (« Je t'avais juste demandé de corriger une ligne ») : un agent transforme la correction d'une coquille d'une ligne en une ville entière pendant la nuit. Un seul fichier HTML de 81 Ko ; chaque note et chaque effet sonore est synthétisé avec Web Audio.

Les skills ont été conçus et testés avec Claude Opus 5.5. Ils s'installent aussi dans Cursor, Codex et d'autres agents, mais nous ne les avons pas testés avec d'autres modèles. Dessiner un film entier sollicite énormément le raisonnement spatial et la capacité du modèle à relire ses propres planches contact : utilisez le modèle le plus puissant dont vous disposez, capable de traiter des images.

Méthode 2 : le mode Animation d'iArt, sans code

Si vous préférez ne pas installer de terminal, iArt fait tourner la même méthode sous forme de produit. Ouvrez Create → Animation, tapez le prompt, choisissez 16:9, 9:16 ou 1:1, puis envoyez. Sous le capot, l'approche est la même : un agent sous Claude Opus 5.5 écrit le storyboard, le code de dessin et la partition, vérifie ses propres images fixes, et le film se lit dans votre navigateur. Ce qui change par rapport au faire soi-même :

• Films plus longs. Pour un film plus long, demandez-lui de continuer : il ajoute la suite dans le même projet, avec les mêmes personnages, le même style et la même partition.
• Les retouches se font en phrases. Répondez avec ce qu'il faut changer ; il modifie le code et redessine.
• Photo de référence. Joignez une photo et l'agent en tire un personnage dessiné. La photo elle-même n'apparaît pas dans le film.
• Export et partage. Partagez via un lien public, ou exportez un MP4 avec la bande-son mixée, encodé dans votre navigateur.
• Coût. Le crédit de 2 $ offert à l'inscription suffit pour une animation d'environ 30 secondes ; l'export en MP4 nécessite un forfait payant.
• Pas encore disponible. La voix off n'existe pas en mode Animation ; la bande-son se compose de musique et d'effets sonores. Si vous avez besoin d'une narration avec du texte exact à l'écran, le mode Motion d'iArt anime lui aussi en écrivant du code (React et GSAP plutôt qu'un canvas) et prend en charge la voix off IA ; voir les vidéos explicatives IA.

"Opening sequence for my faceless YouTube bedtime-story channel 'Sleepy Lantern'. Cozy, 15 seconds, ends on the channel name." Un générique de chaîne dessiné en code, et une bonne façon d'utiliser ce style sur une chaîne faceless.

FAQ

Claude peut-il faire des animations ?

Oui. Claude Opus 5.5 peut écrire du JavaScript qui dessine chaque image d'un court métrage sur un canvas HTML, avec une bande-son synthétisée par la Web Audio API dans le même fichier. Le code est ensuite rendu image par image en MP4. Les films partagés après le lancement d'Opus 5.5 sont faits de cette façon, sans aucune ressource image.

Faut-il savoir coder ?

Non. Dans Claude Code, l'agent écrit tout le code à partir d'un prompt en langage courant, mais vous devrez installer quelques outils. Dans le mode Animation d'iArt, il suffit de taper le prompt dans un navigateur.

Quel modèle utiliser ?

Le skill open source et le mode Animation d'iArt ont tous deux été conçus et testés avec Claude Opus 5.5. Les autres modèles n'ont pas été testés ; attendez-vous à des dessins plus grossiers avec des modèles moins puissants. Le modèle doit savoir traiter des images, car il relit ses propres images fixes.

Quelle durée peut avoir une animation dessinée en code ?

Avec le skill, la durée que vous voulez, même si les films plus longs demandent plus de temps de planification et de vérification. Dans le mode Animation d'iArt, un film plus long se construit en plusieurs parties dans le même projet : demandez-lui de continuer jusqu'à la durée voulue.

D'où vient la musique ?

Elle est écrite en code avec la Web Audio API : percussions, basse, nappes et un son synthétisé pour chaque action à l'écran, le tout sur une carte de tempo pour que les coupes tombent sur le temps. Elle est rendue hors ligne puis mixée dans le MP4. Le skill peut aussi fonctionner avec un fichier musical que vous fournissez.

Peut-on ajouter une voix off ?

Pas encore dans le mode Animation d'iArt ; la bande-son se compose de musique et d'effets sonores. Le mode Motion d'iArt, qui anime avec du code React et GSAP, prend en charge la voix off IA si vous avez besoin d'une narration dès maintenant.

À vous de jouer

Choisissez sur cette page le prompt le plus proche de ce dont vous avez besoin, changez le sujet et lancez-le : dans Claude Code avec le skill open source, ou dans le mode Animation d'iArt, sans rien à installer. Puis regardez la première prise comme le ferait un réalisateur, et dites ce qu'il faut changer. D'autres films et leurs prompts sont à découvrir sur la page créateur d'animations JavaScript.