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 prompt ci-dessous commence par les mots exacts qui ont donné son film.

"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.

Comment écrire un prompt pour une animation dessinée en code

Une phrase suffit déjà pour un bon film : la question à laquelle il répond, à qui il s'adresse, sa durée et son format. Pour un film plus professionnel, écrivez le prompt sous forme de court brief, dans cet ordre :

[Une ou deux phrases : ce qu'est le film, sa durée, son format.]

IDEA: le sujet ou le procédé unique qui porte tout le film.

0–2s: ce qui est à l'écran, ce qui bouge et comment, les mots exacts.
2–5s: …
(une ligne par temps fort, jusqu'à la fin)

LOOK: fond et palette (codes hex), typographie, textures, composition.
MOTION: où ça va vite, où ça se pose, comment chaque plan passe le relais au suivant.
SOUND: la musique (tempo, instruments, ambiance) et un son pour chaque action. Écrivez "No narration." s'il n'y en a pas.

Les prompts de ce guide sont écrits de cette façon : la première phrase est celle qui a donné le film, et le reste décrit ce film seconde par seconde. Lors de comparaisons à l'aveugle côte à côte dans le mode Animation d'iArt (un modèle d'IA a regardé les deux films, dans un ordre puis dans l'autre), le brief complet l'a emporté sur la phrase d'ouverture seule pour cinq des six films testés, et a fait jeu égal sur le sixième. Il prend plus de temps à générer et consomme plus de crédits, car il y a davantage à construire. Le plus rapide pour en écrire un : décrire seconde par seconde un film que vous aimez.

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 (MDN : Canvas API). 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(), dont la graine ne peut être ni choisie ni réinitialisée (MDN). 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.

Trois films où le rendu est nommé dans le prompt, avec des mots simples :

Paper cut-out collage style, like a children's picture book made of construction paper. A little boy at his window can't sleep, so a small friendly cloud drifts down over the rooftops, borrows a bit of moonlight and glows like a nightlight until he dozes off. 20 seconds, square 1:1.

IDEA: One small smiling paper cloud is the hero: it drifts to the moon, soaks up its golden light, then floats down beside the boy's window. The film is the cloud turning from plain cream paper into a glowing nightlight.

0–3.3s: wide shot of a sleepy town at night: purple paper gabled houses, deep blue starry sky, a big textured full moon upper right. In a warm yellow attic dormer, a boy in blue leans out and looks up.
3.3–6.7s: cut to a medium close-up of the boy framed in the glowing dormer. He yawns wide, rubs one eye with his fist, then rests his chin on his folded hands on the sill.
6.7–10s: back to the wide sky. A fluffy cream paper cloud with a smiling face drifts in from the upper left and glides slowly across the stars toward the moon.
10–13.3s: close-up on the moon. The cloud eases up against its left edge and nuzzles it. Soft yellow light pulses between them, sparkles twinkle, and warm gold spreads through the cloud from inside. It blushes and smiles.
13.3–16.7s: medium-wide on the rooftop. The now golden, glowing cloud floats down on a slow eased arc and settles gently right beside the open dormer window.
16.7–20s: medium shot of the window and the glowing cloud. Tiny yellow star sparkles drift around them. The boy's eyes grow heavy and close with a contented smile as he dozes off. Hold in stillness to the end.

LOOK: midnight indigo sky #1E2243 and #262B54, plum and slate-purple rooftops #3C335C and #4D476D, warm lamp yellow windows #FED466 and #F6AD3C, creamy moon #F8E7A2 and #EED37A, cloud cream #F4EEDC turning golden. Everything is cut from textured construction paper: fibre grain, stippled roofs and sky, torn deckled edges. The glowing window anchors the centre; moon and cloud live in the upper third.

MOTION: slow, low-energy, lullaby pace. The cloud drifts smoothly with soft eased stops at the moon and at the window, with a gentle squash and stretch as it floats. The boy moves like a paper puppet: stepped blinks, swapped mouth shapes for the yawn, a simple arm rub.

SOUND: a slow, gentle lullaby on fingerpicked nylon-string guitar and warm acoustic bass with soft celesta and glockenspiel accents. Magical chimes and a soft sparkle sweep when the cloud touches the moon and fills with light, faint twinkles as it descends. The music never stops. No narration.

Essayer ce prompt dans iArt →

Le rendu collage de papier est celui que le clip de Kevin Ngo a rendu populaire ; l'histoire est la nôtre.

Black-and-white ink woodcut style, rough carved lines on off-white paper. A girl folds a paper boat and sets it into the rain gutter; as it drifts through the city at night, every window it passes lights up and someone folds another boat. Short hand-lettered captions. 25 seconds, 16:9.

IDEA: One paper boat drifting left to right along the gutter is the spark. Every window it passes snaps on, and the light spreads like a chain reaction until the whole city glows and the gutter is full of boats.

Captions: lowercase hand-lettered white text in a black banner at the bottom, one per shot.

0–2.6s: a dark, hatched, rain-soaked skyline inks in on off-white paper, a small girl sitting on her front steps, rain lines jittering. Caption: "a dark, wet city".
2.6–5.1s: close-up of her mittened hands folding a cream sheet: triangle hat, brim, pop open into a boat. Caption: "she folded one boat".
5.1–7.6s: the girl with pigtails reaches down from the stoop, sets the boat on the gutter stream and lets go; it drifts right, bobbing. Caption: "and let it go".
7.6–12.6s: track right with the boat past dark facades. A ground-floor window bursts on with cream light and pointed rays, a silhouette inside; neighbours pop on; from an upper window someone drops another boat. Caption: "one window woke".
12.6–15.1s: wider street. Windows pop on in a ripple along the whole block; several boats now float together. Caption: "then the next street".
15.1–20.1s: the opening skyline again; light spreads across tenements and far towers until hundreds of windows glow. Caption: "then the whole city".
20.1–22.6s: low tracking shot along the curb: dozens of boats in a tight convoy, silhouettes watching from lit windows. Caption: "boats, and more boats".
22.6–25s: her building, every window lit; the girl sits in the central arched window holding a folded paper bird. Caption: "it started with one." Hold.

LOOK: strictly two tones like a linocut print: off-white paper #F3EFE6, carbon black #161412 for buildings, figures and banners, bright cream #FFFDF8 for window light and boats. Rough carved lines, heavy crosshatching, spiky ray bursts around lit windows. Flat side-on framing, water line low.

MOTION: animated on twos, hand-printed feel. Folds and windows snap on instantly with a short ray burst; boats drift smoothly with a gentle bob. Hard cuts; the only camera move is a slow pan along the water. The light spreads faster and faster.

SOUND: reflective fingerpicked acoustic guitar around 75–80 BPM, melancholy turning hopeful, over continuous rain hiss. Paper creases on each fold, a soft water dip, a warm switch click and small chime per window, clicks multiplying as the city lights up, a last chord ringing into the rain. No narration.

Essayer ce prompt dans iArt →

Inspiré de l'animation à l'encre de @shfred0.

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

IDEA: One illustrated textbook page. Follow a sunbeam into the air: molecules knock the short blue waves off in every direction while red passes straight on, and that scattered blue reaches a boy's eye from all over the sky.

Throughout: header "CHAPTER 7 · LIGHT AND THE AIR", page "143", a title at the top, a "Fig." caption at the bottom, all typed on letter by letter.

0–3.8s: a boy in a blue cap in a field, a crosshatched red sun above. Title: "Why Is the Sky Blue?" Caption: "Fig. 7-1. On a clear day the whole sky looks blue. But sunlight itself looks white. Where does the blue come from?"
3.8–7.6s: push in to the sun; a white beam carries a long red wave and a short blue wave side by side. Labels pop in: "WHITE SUNLIGHT", "RED: LONG WAVES", "BLUE: SHORT WAVES". Title: "1. Sunlight is a mix of colors". Caption: "Fig. 7-2. White sunlight holds every color of the rainbow. Red light travels in long waves; blue light in short ones."
7.6–12.6s: along the beam among paired-circle molecules ("AIR MOLECULE"), the blue wave hits one and sprays out in rings: "BLUE BOUNCES OFF IN ALL DIRECTIONS". The red wave carries on: "RED PASSES STRAIGHT ON". Table top right, "LIGHT SCATTERED BY AIR": RED 1x, BLUE counting up to 6x. Title: "2. Air scatters the short waves". Caption: "Fig. 7-3. Tiny molecules of air knock short blue waves off in all directions, about six times more than long red ones."
12.6–16.4s: back to the field; dashed blue lines run from molecules all over the sky into the boy's eye ("YOUR EYE"). Title: "3. Blue arrives from every direction". Caption: "Fig. 7-4. Wherever you look, scattered blue light is coming toward your eye. So every part of the sky looks blue."
16.4–20s: full diagram holds. Title: "In Short". Caption becomes a bordered box: "The air scatters blue light out of sunlight, all across the sky. That is why the sky is blue." Hold.

LOOK: aged newsprint #EDE7D7, vermilion #D75D4E for sun and red wave, cornflower blue #4B78A4 for blue wave and sky lines, mustard ground #C4B17B, olive tree #8A7D58, faded charcoal #22201E lines and text. Lithograph print feel: fine horizontal ruling, crosshatch shading, a double-ruled diagram frame. Bold sans titles, plain sans captions, caps labels.

MOTION: calm classroom pace with holds for reading. Waves travel at steady speed; scatter rings expand smoothly, no bounce.

SOUND: warm, minimal electric piano chords around 80 BPM. Typewriter clacks on all typing, no whooshes, a resolving chord and one last key strike. No narration.

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

Un prompt court qui nomme la mission suffit pour commencer : la question à laquelle répond le film, le public, la durée et le format. Vous n'êtes pas obligé d'écrire la liste des plans, car la planifier est la première étape de l'agent (étape 3) ; l'écrire vous-même, comme dans le brief ci-dessus, vous rapproche du film que vous avez en tête. Ce qu'il est utile de mettre dans la phrase d'ouverture :

• 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 (les spécifications de TikTok recommandent le vertical 9:16 — TikTok for Business).
• 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.

IDEA: One cutaway earcup on a listener's head is the whole diagram. Red noise wave in, mic hears it, chip flips it teal, speaker plays it, red plus teal add to a flat line. A bottom meter drops LOUD, MUFFLED, QUIET.

0–2.4s: an annoyed listener faces a fan-like engine labelled "ENGINE HUM". A red sine wave travels into his ear; the bottom meter "NOISE AT YOUR EAR" fills red to "LOUD". Question card drops in at the top: "How do headphones erase noise?"
2.4–3.8s: over-ear headphones slide down onto his head and open into a cutaway: outer mic, chip, inner speaker. The cushion damps the wave; meter falls to "MUFFLED".
3.8–7.6s: punch in on the earcup. Card: "STEP 1 / A mic outside hears the noise". A pulsing ring marks the mic; a screen on the chip traces the red wave.
7.6–11.3s: card: "STEP 2 / A chip flips it upside down / every peak becomes a dip". The wave on the chip screen flips vertically and turns teal.
11.3–12.6s: card: "STEP 3 / The speaker plays the flipped wave". The speaker sends the teal wave into the ear alongside the red one. Equation: "NOISE" + "FLIPPED" = "YOU HEAR".
12.6–15.2s: card: "PEAK + DIP / They cancel out / the hum mostly disappears". Red and teal overlap and flatten into one grey line; meter shrinks to "QUIET" in green.
15.2–18.8s: slight pull back. Card: "THE CATCH / Best on steady hums like engines & fans / sudden sounds get through more".
18.8–22s: reframe on the now smiling listener. Four lines stamp on one by one: "Hear it." "Flip it." "Play it." "Quiet." Hold.

LOOK: warm off-white paper #F1EFE8 with fine grain. Charcoal #22252A headphones and outlines, warm grey #7F7C77 clothes and parts, coral red #D84337 for the noise wave and LOUD, teal #26B5A1 for the flipped wave, forest green #2D6A4F for QUIET. Minimal flat infographic: cutaway diagram, pill badges, thin line waves. Bold sans headlines, small tracked caps labels, text kept in the upper and lower thirds.

MOTION: clear cause-and-effect pace; each card holds one to two seconds to read, then swaps with a quick slide or dissolve. Props move fast with a snappy ease-out; waves scroll smoothly and continuously.

SOUND: warm fingerstyle acoustic guitar with soft piano and a light beat, around 90–100 BPM, under a steady low engine drone at the start. A click and muffled filter sweep as the headphones seal, blips on the mic, a rising synth whoosh on the flip, then the drone cuts out abruptly at the cancel. Soft woodblock pops on each final line, chords resolving. No narration.

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.

IDEA: One little acorn with a face is the hero throughout, seen in a fixed side-on cross-section with soil below, sky above. It wakes, roots, sprouts, becomes an oak, lives through the seasons, and ends by dropping a new acorn, closing the loop.

0–4.5s: brown soil layers under rain; a tiny acorn sleeps underground above a pebble. A small grey badge appears top left: "Act I · Below". Drops seep down toward it.
4.5–9s: close-up: three drops land on its cap, its eyes pop open with a smile, the shell cracks and a pale first root pushes downward.
9–19.5s: wide again. The root drives down, curves around the pebble and branches into side roots. A green shoot pushes up through the soil, pausing just below the surface.
19.5–25s: the shoot breaks through. Badge changes to "Act II · Above". Two rounded first leaves unfold and spread; the seedling smiles up at the sky.
25–30s: the stem thickens into a trunk, the acorn's face still at its base. Branches grow and burst into round green leaf clusters with small pink blossom dots; a warm sun rises upper right.
30–33s: autumn. The sky warms; the canopy turns golden orange and leaves drift down to the ground.
33–36s: winter. Bare branches, snow falling, a white layer building on the soil. The face sleeps calmly.
36–40s: spring. The snow melts, green canopies pop back with blossoms, an acorn ripens on a branch, falls and lands on the soil with two small bounces.

LOOK: soil in deep chocolate #4A3322 and umber #5A3D28 with tan flecks #9C8471; sky parchment cream #EBE5D8; acorn golden ochre #D89849 with chestnut cap #8C5A28; stem green #88A878; foliage sage #94B097 and olive #5F8265, autumn orange #C8873E, blossom coral #E28A7A; sun amber #E2A35B. Flat shapes with light paper grain, simple line roots and branches, round canopies. Badge: small grey #7E858C rounded box, white text.

MOTION: calm, readable, with pauses between each stage of growth. Springy squash and stretch on the crack, leaf pops and landing; smooth easing on root and branch growth. Seasons change in place with colour shifts, falling leaves and snow.

SOUND: one unbroken, unhurried fingerstyle acoustic guitar score, thinning in winter, lifting for spring. Drip pings underground, a crisp shell crack, soft pops on eye-open and when the shoot breaks through, birdsong above ground, woody rustles, an autumn breeze, quiet winter wind, a spring chime, and a hollow thud as the new acorn lands. No narration.

Essayer ce prompt dans iArt →

40 secondes, deux parties, 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 la deuxième moitié », « 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'idée est la même : un agent sous Claude Opus 5.5 écrit le storyboard, le film en code (texte composé, SVG et données, avec une couche canvas pour le travail dessiné à la main comme les films de cette page) 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. Demandez la durée que vous voulez ; un film plus long prend plus de temps à générer et coûte plus cher.
• Les retouches se font en phrases. Répondez avec ce qu'il faut changer ; il modifie le code et redessine.
• Vos images. Joignez des captures d'écran, un logo ou des photos produit : ils apparaissent tels quels dans le film. Joignez la photo d'une personne ou d'un style qui vous plaît : elle sert de référence pour un personnage ou un style dessiné. Précisez lequel. Vous pouvez aussi lui donner l'adresse de votre site.
• Export et partage. Partagez via un lien public, ou exportez un MP4 avec la bande-son mixée, rendu dans le cloud (1080p avec Pro, 4K avec Ultra). Les incrustations, comme les bandeaux, s'exportent en WebM transparent.
• Coût. Un film de 20 à 30 secondes coûte environ 0,60–1,00 $ et se génère en 4 à 5 minutes environ : le crédit de 2 $ offert à l'inscription en couvre donc deux ou trois ; l'export en MP4 nécessite un forfait payant.
• Voix off. Choisissez une voix dans la zone de message et le film est narré, l'image calée sur les mots. Sans voix, la bande-son se compose de musique et d'effets sonores.

"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.

Quelle longueur doit avoir le prompt ?

Une ou deux phrases suffisent pour un bon film : ce qu'il est, sa durée, son format et le moment qui compte. Pour un film plus professionnel, ajoutez un court brief d'environ 300 à 450 mots : l'idée unique qui porte le film, les plans seconde par seconde avec les mots exacts à l'écran, le style, le mouvement et un son pour chaque action. Un brief prend plus de temps à générer et consomme plus de crédits.

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, demandez la durée voulue ; un film plus long prend plus de temps à générer et coûte plus cher.

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 ?

Oui. Dans le mode Animation d'iArt, choisissez une voix dans la zone de message : l'agent écrit le texte, l'enregistre et cale l'image dessus. Sans voix, la bande-son se compose de musique et d'effets sonores.

À 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.