Exemples d'animation sur canvas : 7 films dessinés image par image en JavaScript, avec les prompts et nos mesures
Depuis la sortie de Claude Opus 5.5, « chaque image dessinée en JavaScript » est devenu un genre à part entière : de courts films où un programme peint chaque image sur un canvas HTML, avec une musique synthétisée dans la même page. Cet article rassemble des exemples d'animation sur canvas réalisés de cette façon, dans le mode Animation d'iArt et avec le skill open source. Chacun est présenté avec son prompt (la première phrase est exactement celle dont le film est issu) et ce que nous corrigerions. À la fin, un tableau compare les résultats d'un même script de mesure lancé sur nos films et sur quatre des films qui ont circulé sur X, pour voir concrètement en quoi ils diffèrent.
Activez le son pour entendre la bande-son : elle aussi, c'est du code. Les prompts de cette page sont reproduits dans leur version d'origine ; l'application accepte des prompts dans n'importe quelle langue.
Comment écrire un prompt d'animation sur canvas
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.
Chaque prompt de cette page est écrit de cette façon : la première phrase a donné le film, et le reste est le brief que nous avons écrit à partir de lui. 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.
Le point commun de ces exemples
Chaque film ci-dessous a été réalisé par un agent sous Claude Opus 5.5 à partir d'un prompt d'une phrase, sans aucun fichier image, vidéo ou audio. L'agent a d'abord planifié une grille rythmique et une liste de plans, puis écrit le code de dessin et la partition, et enfin relu sa propre planche contact avant de rendre sa copie. Rien n'a été retouché à la main ensuite. C'est pour cela que chaque légende signale un défaut : ces défauts sont ce que contient réellement la première prise. La méthode est détaillée étape par étape dans comment créer une animation dont chaque image est dessinée en JavaScript, et le terme lui-même dans l'entrée du glossaire animation JavaScript.
1. Comment ChatGPT choisit le mot suivant (vidéo explicative 9:16)
How does ChatGPT actually pick the next word? A 25-second vertical explainer for TikTok, no jargon.
IDEA: A weighted prize wheel. Read the sentence so far, give every possible next word odds, spin a wheel sliced by those odds, add the winner, repeat. One example sentence builds through the film.
0–3.5s: dark chat-style screen. Headline "How does an AI chatbot actually pick" with "the next word?" popping in amber. User bubble: "Name a classic sandwich". In the answer box, words type with a blinking cursor: "Peanut", "butter", "and".
3.5–7s: four step pills slide in on top: "1 READ" (active, amber), "2 ODDS", "3 SPIN", "4 ADD". Headline: "First, it reads everything so far". Caption: "your question + everything written so far". The words light up one by one in soft blue-violet; a dashed amber box with a blinking "?" pops in after "and".
7–10.5s: "2 ODDS" active. Headline: "Every possible next word gets odds". Bars grow one after another with counting numbers: jelly 62%, jam 17%, bread 8%, banana 6%, honey 4%. Note: "+ thousands more, each with tiny odds (made-up example numbers)".
10.5–16s: "3 SPIN" active. Headline: "Then it spins. Bigger slice, better chance." The bars curl into a wheel with slices sized to their odds, amber pointer at 12 o'clock. It spins fast and slows. Footnote: "Usually a big slice wins. Not always: that's why answers can vary." It stops on "jelly".
16–21s: "4 ADD" active. Headline: "It adds the winner... then does it all again." The slice flashes gold, "jelly!" pops, and "jelly" drops into the answer in gold. A smaller wheel then spins in quick loops adding "is", "a", "classic", "." until it reads "Peanut butter and jelly is a classic."
21–25s: headline "Every word goes round this loop", then "One word at a time." Below the sentence, a dotted ring draws with nodes READ, ODDS, SPIN, ADD around "for every word"; an amber dot circles clockwise, each node popping as it passes. Hold.
LOOK: navy-charcoal #12151D with fine grain. Amber #FFB72B is the only highlight. Wheel slices periwinkle #8799C7, steel blue #515D7A, slate #2C3345. Panels #1D2332 with thin #2D364D borders; white text, secondary #9AA5B5. Bold geometric sans. No logos.
MOTION: measured for three steps, a clear speed-up in the repeat loops, then a calm steady orbit. Elements morph in place instead of cutting; springy pop-ins, physical ease-out on the wheel.
SOUND: light lo-fi electronic groove with warm synth arps. Typewriter clicks, a blip on each step change, a rising arpeggio as bars fill, a whoosh on the morph, ratchet clicks slowing with the wheel, a ding on each winner, quick pops in the loops, a ping at each node. No narration.
Voir le prompt complet ▾Voir moins ▴
Ce qu'il faut regarder. C'est le film présenté plus haut. L'agent a transformé « choisir le mot suivant » en roue de la fortune dont la taille des parts correspond aux probabilités, et toute l'explication tient dans cette roue : lire, estimer les chances, tourner, ajouter, puis recommencer la boucle pour le mot d'après. Un indicateur d'étapes reste affiché en haut pour qu'on sache toujours où l'on en est. Les probabilités à l'écran sont signalées comme des chiffres d'exemple inventés, et lors d'une des répétitions rapides, c'est le deuxième mot le plus probable qui l'emporte, pour montrer que le premier choix ne gagne pas toujours.
Ce que nous corrigerions. Le film parle de « mots » du début à la fin ; en réalité, ChatGPT choisit des morceaux de mots, ce que l'agent a laissé de côté pour éviter le jargon. Le tiers inférieur de l'image reste plutôt vide pendant les sept premières secondes.
2. Comment votre téléphone sait où vous êtes (vidéo explicative 1:1)
How does your phone know where you are? A 25-second GPS explainer for my science Instagram, playful but accurate.
IDEA: A cute pink phone character on a cartoon Earth. Satellites send it timestamps; time becomes distance, distance becomes circles, and where they cross is the phone.
0–4s: cream paper background. The phone (white screen face, stick limbs) stands on a navy-and-teal globe. Top-left text types on: "How does your phone" then, in magenta, "know where you are?". A red question mark springs up above it.
4–8.5s: the globe shrinks to centre; a dashed orbit draws and six satellites pop on, each sending soft ping rings. A ruler marks "20,200 km". Text: "About 30 GPS satellites, 20,200 km up. Each keeps broadcasting where it is + the time from its atomic clock."
8.5–12.5s: text: "Your phone just listens. The signal flies at the speed of light..." A glowing red packet travels to the phone while a slow-mo timer rolls 0.000 s to 0.070 s. Text: "It arrived 0.07 s late. 0.07 s × 300,000 km/s = 21,000 km away." A yellow badge "21,000 km" pops on the beam.
12.5–18.5s: zoom out; satellites labelled A, B, C. "1 satellite: you're somewhere on this circle." A magenta range circle grows through the phone. "2 satellites: one of two spots." Second circle; two crossings, one marked "?". "3 satellites: found you." Third circle; all meet at the phone.
18.5–22s: close on the phone. Status bar: "phone clock: off by 0.000001 s"; a yellow wedge of uncertainty spreads and the phone looks worried. Text: "Catch: your phone's clock isn't atomic. Off by a millionth of a second = 300 m wrong." Then: "So a 4th satellite joins in and the phone solves for its own clock error." Four beams converge, the wedge shrinks, the bar flips yellow: "phone clock: corrected". The phone smiles.
22–25s: wide; a yellow map pin on the phone, satellites pulsing dots down their sightlines on the beat. Text: "Time becomes distance. Distance becomes a dot on your map." Hold.
LOOK: cream paper #F5EFEB, light grain, tiny scattered crosshairs. Navy #131E3D oceans and type, teal #2B5B7D continents with halftone edge, magenta #E64980 phone, signals and circles, yellow #F5BF38 labels, badges, pin. Flat vector, thin strokes, bold geometric sans with key words tinted.
MOTION: quick 0.3–0.5s changes, then 1.5–2s rests to read. Smooth zooms instead of cuts; elastic overshoot on character and badges.
SOUND: mid-tempo lo-fi beat with warm electric piano and soft snare. Typewriter clicks for text, pops for satellites and badges, a hum and fast counter ticks during the signal flight, a ding on arrival, rising tones per circle, a buzz on the clock error, a happy chime on "corrected". No narration.
Voir le prompt complet ▾Voir moins ▴
Ce qu'il faut regarder. « Ludique mais rigoureux » est devenu un look de fanzine scientifique en risographie : encres bleue et rose en aplats sur papier crème, avec un petit téléphone rose dans le rôle du personnage. La physique est juste et dessinée à l'échelle : une trentaine de satellites à 20 200 km (31 satellites opérationnels en orbite terrestre moyenne, selon GPS.gov), un signal chronométré à 0,070 s qui devient 21 000 km, trois cercles de distance qui se croisent sur le téléphone, puis le hic : l'horloge du téléphone lui-même est décalée, et c'est un quatrième satellite qui rattrape l'erreur. La bande-son mêle marimba et percussions de wood-block, avec un son pour chaque apparition, chaque impulsion et chaque épingle.
Ce que nous corrigerions. Le positionnement est représenté par des cercles plats plutôt que par des sphères, la simplification habituelle. Dans les plans larges, le téléphone mesure environ 30 px de haut, si bien que sa pose « à l'écoute » se lit à peine, et le quatrième satellite reste hors champ pendant que son cercle arrive.
3. La demi-seconde après avoir appuyé sur Entrée (vidéo explicative 16:9)
What happens in the half second after you type a website address and press Enter? A 30-second explainer for our developer newsletter.
IDEA: A browser left, a server right, one wire between. Each stage is acted out as labelled packets on the wire, while a bottom bar, "the half second, slowed down", runs from "Enter" to "page painted".
0–3.8s: empty browser centred. Headline: "What happens in the half second after you press Enter?" A rounded "enter" key appears; "shop.example" types into the address bar.
3.8–5s: the key lights amber; the browser slides left and the progress bar starts.
5–10s: top-left: "1 DNS: find the address" / "The resolver asks root, then .example, then the domain's own name server." Packet "where is shop.example?" runs to "DNS resolver", pings bounce to "root", ".example", "ns.shop.example", and "203.0.113.42" returns to the address bar.
10–14.5s: "2 TCP: open a connection" / "Three messages: SYN, SYN-ACK, ACK." The tree collapses into a server rack "shop.example / 203.0.113.42". SYN, SYN-ACK, ACK slide back and forth; the wire turns solid: "connection open".
14.5–19s: "3 TLS: make it private" / "The server proves who it is; both sides agree on keys." "hello" goes out, "certificate + key" comes back. A card: "CERTIFICATE / shop.example / signed by a trusted certificate authority" gets a green "checked". A padlock snaps shut mid-wire; the wire turns mint.
19–22.7s: "4 HTTP: ask for the page" / "GET / comes back as 200 OK and the HTML." "GET /" glides over; "200 OK" returns, then tag pills "<html>", "<body>", "<h1>" stream into the browser.
22.7–27.6s: "5 Render: text into pixels" / "Parse the HTML, lay out the boxes, paint." Push in on the browser. HTML becomes a DOM tree, then dashed layout boxes. A vertical wipe paints a finished coffee-shop page in cream, brown and orange; the tab reads "Fresh coffee".
27.6–30s: "All of that, in about half a second." The bottom bar becomes five badges DNS → TCP → TLS → HTTP → Render, snapping in one by one. Hold.
LOOK: warm near-black #121318 with fine grain, UI chrome #1A1B24. Amber #F59E0B for packets, key and marker; mint #34D399 for security and success; page in cream #F6F1E9, brown #201E1D, mustard #EAB308. Geometric sans for titles, monospace for URLs, IPs and tags. Pill packets, rounded cards, dashed paths.
MOTION: the marker moves steadily throughout. Packets ease in, shoot across, settle. Old stages slide aside as new ones arrive; no cuts.
SOUND: mellow lo-fi bed with Rhodes chords. Key clacks, a switch click on Enter, pings for DNS hops, ticks for the handshake, a latch click as the lock closes, blips per streamed tag, a shimmer as the page paints, five rising bell notes for the badges. No narration.
Voir le prompt complet ▾Voir moins ▴
Ce qu'il faut regarder. Une seule carte réseau continue, que la caméra parcourt : le DNS, puis la poignée de main TCP sous forme de pastilles SYN / SYN-ACK / ACK sur un câble, puis TLS avec la vérification du certificat et un cadenas, puis GET / et 200 OK, et enfin l'affichage de la page. Chaque message est une pastille qui montre ce qu'il dit mot pour mot. L'ambre pour ce qu'envoie le navigateur, le blanc cassé pour les réponses, et le vert seulement une fois la liaison chiffrée. L'adresse d'exemple pointe vers 203.0.113.42, une plage réservée à la documentation (RFC 5737) : ce n'est donc le vrai serveur de personne.
Ce que nous corrigerions. Dans les plans larges, les pastilles font 25 à 35 px à l'écran, c'est petit sur un téléphone. Les 3,7 premières secondes sont assez statiques (seulement la question et la saisie), et le film simplifie : pas de cache DNS, pas de HTTP/3.
4. Une histoire de l'IA moderne en 30 secondes (16:9)
A 30-second history of modern AI, from the 2017 paper 'Attention Is All You Need' to today's AI agents that write code. For a tech YouTube channel.
IDEA: A timeline along the bottom with an orange marker moving right. Each milestone is a small working demo of what it made possible; at the end the camera pulls back to show them all in a row.
0–5s: top-left "2017" / "Attention Is All You Need". A cream paper's title types out; its five words lift into tiles and orange arcs leap between them. Caption: "The Transformer: every word looks at every other word."
5–8.8s: "2018" / "Pre-training". Text scrolls upward on the left ("books, articles, the web... forums, code"); a six-block model stack lights up layer by layer on the right: "GPT · OpenAI · 2018" and "BERT · Google · 2018". Caption: "GPT and BERT learn language by reading mountains of text."
8.8–12.5s: "2020" / "Scale". A tiny square "GPT-1 · 2018 / 117M", a larger "GPT-2 · 2019 / 1.5B", then a huge orange block "GPT-3 · 2020 / 175B parameters". Caption: "GPT-3: 175 billion parameters, ~1,500x GPT-1 (to scale)."
12.5–16.3s: "2022" / "ChatGPT". "Explain attention like I'm five." types into a chat; the reply streams: "Every word looks at the other words in the sentence to work out what it means." Caption: "ChatGPT: now anyone can just talk to it."
16.3–20.2s: "2024" / "Reasoning". Prompt: How many r's in "strawberry"? Tiles s t r a w b e r r y; a box steps across, each r flashes orange, a counter goes 1, 2, 3, then "Answer: 3 ✓". Caption: "Reasoning models work it out step by step, then answer."
20.2–26.7s: "2025" turning to "Today" / "Coding agents". Terminal in ~/my-app: "> add a dark-mode toggle to the settings page", "Reading 12 files", green diff lines, "Running tests", "✓ 24 passed, 0 failed". Caption: "Coding agents read the code, change it, and run the tests."
26.7–30s: pull back to all six milestones side by side above the timeline. Centred: "2017: one paper about attention." / "Today: AI that writes the code." Hold.
LOOK: near-black #121316 with fine grain. Paper cream #EFEAD8, orange #FF5E36, terminal green #3DD68C, text #DCDAD5, panels #1C1E24 with thin borders. Years and titles in a high-contrast serif; captions in monospace.
MOTION: precise and calm. Fast bursts of typing and scanning, each followed by a short hold. Year changes: defocus blur plus sideways pan. One smooth pull-back at the end.
SOUND: minimal ambient drone with warm pads. Typing clicks, a chime per attention arc, a thud and riser on GPT-3, ticks per scanned letter, pings on the answer and passing tests, a whoosh per year change, a pad resolving at the end. No narration.Voir le prompt complet ▾Voir moins ▴
Ce qu'il faut regarder. Six époques, un plan chacune, avec une frise chronologique qui suit l'année en bas de l'image : l'article de 2017, avec l'attention dessinée sous forme d'arcs entre les mots de son titre ; GPT et BERT en 2018 ; la taille des modèles représentée par des carrés dont l'aire correspond au nombre de paramètres (117M, 1,5B, 175B) ; une fenêtre de chat en 2022 ; un modèle de raisonnement qui compte les r de « strawberry » ; et un agent de code dont les tests passent. L'agent s'en est tenu, à l'écran, aux faits dont il était sûr, et n'a cité aucun nom de produit postérieur à 2022.
Ce que nous corrigerions. Le dézoom final réduit les six époques à des vignettes illisibles, et les légendes de 29 px sont petites sur un téléphone. C'est aussi le film le plus sombre de la sélection, et celui où les goûts maison du modèle (un fond bleu profond avec des touches ambrées) se voient le plus.
5. La lune borde les étoiles (1:1, pour un enfant de 2 ans)
A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.
IDEA: A friendly moon in a nightcap visits three baby stars lying in little cloud beds and tucks each one in, one after another, until everyone, the moon included, is asleep.
0–2.5s: a starry navy sky over soft rolling purple clouds. Three smiling yellow baby stars sit in fluffy lavender cloud beds with white scalloped edges, left, middle and right. The left star twinkles with soft white rays.
2.5–5s: the middle star, then the right star twinkle in turn. The round cream moon, smiling, wearing a slate-blue nightcap, floats into the top-right corner.
5–7.8s: the view drifts slightly as the moon glides down to the left star and pulls its cloud blanket up to its chin. The star closes its eyes with a little smile and small "z" letters float up.
7.8–10s: the moon glides to the middle star (the biggest one), pulls its blanket up and holds it snug. Its eyes close; "z"s drift up.
10–15s: the moon floats to the smallest star on the right, lifts it into a hug; a pink heart pops up and floats away. The moon lays it back in its cloud bed and tucks it in. The third star falls asleep.
15–17.5s: the moon rises to top centre above the sleeping stars, gives a big slow yawn, and closes its eyes, still floating.
17.5–20s: "Goodnight, stars" fades in, centred near the bottom. Everyone bobs gently up and down as if breathing. Hold to the end.
LOOK: night-sky gradient #1B1C4B to #262768, rolling clouds #282766, cloud beds #BAC0E8 with white #FFFFFF scalloped trim, stars warm yellow #F9C84E, moon pale cream #FDF8E2, nightcap #4A4E90, a small pink heart. Soft flat shapes with very round corners; simple cute faces with dot eyes, tiny curved smiles and blush cheeks. Title in a bold rounded sans, lavender-grey #A0A6D6, sentence case, small. Calm, centred, picture-book layout with the cloud beds in a low row.
MOTION: slow and soothing throughout. Smooth ease-in-out on every move, soft floating holds, a constant gentle bob on all characters. One continuous scene with gentle drifts of the view, no cuts, nothing sudden.
SOUND: a slow music-box lullaby the whole way through. A soft twinkle chime each time a star sparkles, a quiet airy whoosh when the moon moves, gentle bell touches as each star falls asleep and on the heart, a soft sleepy chime as the moon yawns, and the lullaby resolving and fading under the title. No narration.
Voir le prompt complet ▾Voir moins ▴
Ce qu'il faut regarder. Le même moteur, dans le registre opposé : des personnages tout en rondeurs, de grands yeux, une lune coiffée d'un bonnet de nuit, et un mouvement doux presque permanent. Dans le tableau de mesures plus bas, c'est le seul de nos films qui bouge autant que les films viraux. Pour l'agent, « ludique, pour un enfant de deux ans » décrit un look, pas seulement un sujet.
Ce que nous corrigerions. La bande-son a la plage de volume la plus faible de la sélection (environ 4 dB), ce qui convient à l'heure du coucher, mais les coupes tombent en douceur plutôt que sur un temps qu'on sent vraiment.
6. Pourquoi la Lune change de forme (1:1, en espagnol)
¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.
IDEA: Un niño mira la Luna; la cámara entra en diagramas sencillos (Luna medio iluminada, órbita, cuatro fases) y vuelve al niño, que dibuja la Luna entera con el dedo. Unos 40 segundos, formato cuadrado 1:1.
0–5s: un niño de espaldas, jersey naranja, en una colina bajo un cielo estrellado, mira una Luna creciente. Se escribe letra a letra "¿Por qué la Luna cambia de forma cada noche?" ("cambia de forma" en amarillo). Una etiqueta bajo la Luna cambia "noche 3", "noche 7", "noche 11", "noche 15", y la Luna crece hasta llena.
5–16s: zoom a la Luna, que se oscurece: "La Luna no tiene luz propia." Un Sol amarillo entra por la izquierda con rayos discontinuos: "La ilumina el Sol." La mitad que mira al Sol se vuelve crema, la otra azul oscuro; etiquetas "mitad iluminada" y "mitad oscura". Luego: "El Sol siempre ilumina la mitad de la Luna."
16–26.5s: diagrama desde arriba: Sol a la izquierda, Tierra al centro, órbita discontinua. Arriba "La Luna gira alrededor de la Tierra." y, en amarillo, "El ciclo completo dura unos 29 días y medio." Abajo a la derecha, "Así la vemos:" muestra la fase. La Luna, entre el Sol y la Tierra ("Luna nueva"), avanza en sentido antihorario a saltos de un cuarto: "Cuarto creciente", "Luna llena" (detrás de la Tierra), "Cuarto menguante" y otra vez "Luna nueva".
26.5–34.5s: "Cada noche vemos un trozo distinto de su lado iluminado." Cuatro círculos en fila se llenan uno a uno con las fases y sus nombres. Debajo, una flecha amarilla curva de derecha a izquierda: "...y vuelta a empezar".
34.5–40s: de vuelta al niño. Señala la Luna creciente y una línea amarilla discontinua recorre su borde oscuro hasta cerrar el círculo. "La Luna no cambia de forma: cambia cuánto vemos de su lado iluminado." ("cambia cuánto vemos" en amarillo). Se mantiene.
LOOK: cielo azul noche #141838 a #0B0E23; Sol y palabras clave #F8C847; lado iluminado crema #F6F2DC con cráteres #D3CEB0; lado oscuro #2B3463; Tierra #2A74D9 con continentes #4AA96C; jersey #E86F45. Ilustración plana con grano suave. Sans geométrica en negrita, texto blanco centrado arriba. Líneas discontinuas; etiquetas redondeadas.
MOTION: tranquilo, una pausa de un segundo tras cada texto. Cámara suave; etiquetas y fases con pequeño rebote; la Luna avanza a pasos.
SOUND: nana de caja de música y celesta, unos 95 BPM. Tecleo en el texto, un pop en cada etiqueta, un soplo al entrar el Sol, tic-tac de engranaje en la órbita con una campanita en cada fase, pops de madera ascendentes en la fila, un brillo en la flecha y el contorno, acorde final. Sin narración.Voir le prompt complet ▾Voir moins ▴
Ce qu'il faut regarder. Un prompt en espagnol donne un film en espagnol, avec un texte à l'écran écrit sans la moindre faute, puisque le texte est dessiné par le code et non par un modèle vidéo. L'explication est la bonne (la Lune n'a pas de lumière propre ; chaque nuit, nous voyons une portion différente de sa moitié éclairée ; le cycle dure environ 29 jours et demi, selon la NASA), sous forme de schéma Soleil–Terre–Lune accompagné d'encarts « ce que nous en voyons ».
Ce que nous corrigerions. Avec ses 40 secondes, c'est le film le plus long de la sélection et le plus statique après l'histoire de l'IA : 37 % de ses images présentent un mouvement visible. Une chaîne pour enfants voudrait plus de mouvement entre les étapes du schéma.
7. « Je t'avais juste demandé de corriger une ligne » (exemple open source)
Ce qu'il faut regarder. Celui-ci a été réalisé avec le skill javascript-animation open source dans Claude Code, et non dans l'application, et c'est une comédie plutôt qu'une vidéo explicative : quelqu'un demande de corriger une coquille d'une ligne à 01:58 et va se coucher ; à 08:30, le code est devenu une ville entière. Le tout tient dans un seul fichier HTML de 81 Ko ; chaque note et chaque effet sonore est synthétisé par ce même fichier. Les vérifications du dépôt ont mesuré 14 coupes sur 14 calées sur le temps et aucun chevauchement de texte sur 300 images échantillonnées.
Ce que nous corrigerions. La première version de ce film faisait enfantin (formes arrondies, contours épais, style chibi) et plaçait du texte par-dessus des objets ; celle présentée ici est la deuxième, avec un look cinématographique en aplats et des lignes de construction. Il a fallu la relecture d'un réalisateur pour y arriver, et c'est justement l'étape que l'application fait désormais à votre place.
Ce que nous avons mesuré : nos films face à ceux qui ont circulé
Nous avons lancé un même script sur tous les films de cet article et sur quatre des films partagés sur X après la sortie d'Opus 5.5. Il réduit chaque film à 10 images par seconde, en vignette de 48×48 en niveaux de gris, et mesure quatre choses : le mouvement moyen (la variation moyenne des pixels entre deux images consécutives ; plus elle est élevée, plus il se passe de choses par seconde), les images en mouvement (la part des pas de 0,1 seconde où un changement est visible), les coupes franches par tranche de 10 secondes, et la plage de volume (l'écart en décibels entre la seconde la plus forte et une seconde calme). Pour les films publics, nous nous limitons à nos mesures et renvoyons vers les publications d'origine ; nous ne les rehébergeons pas.
| Film | Durée | Mouvement moyen | Images en mouvement | Coupes franches / 10 s | Plage de volume |
|---|---|---|---|---|---|
| Watermelon (Kevin Ngo, partagé par @claudeai) | 29 s | 10,9 | 85 % | 13,3 | 11 dB |
| "What do you love?" (Kevin Ngo) | 28 s | 11,4 | 97 % | 12,5 | 6 dB |
| "Small print" (@Voxyz_ai) | 29 s | 8,2 | 98 % | 0 | 7 dB |
| Video-editor demo (@NFT_Chen) | 30 s | 4,5 | 94 % | 9,0 | 7 dB |
| 5. La lune borde les étoiles | 20 s | 4,8 | 80 % | 6,0 | 4 dB |
| 7. Je t'avais juste demandé de corriger une ligne | 30 s | 3,5 | 52 % | 6,0 | 14 dB |
| 1. Comment ChatGPT choisit le mot suivant | 26 s | 2,1 | 38 % | 1,9 | 12 dB |
| 2. Comment votre téléphone sait où vous êtes | 25 s | 1,4 | 26 % | 2,0 | 8 dB |
| 6. Pourquoi la Lune change de forme | 40 s | 1,2 | 37 % | 1,5 | 6 dB |
| 3. La demi-seconde après avoir appuyé sur Entrée | 30 s | 1,2 | 33 % | 1,0 | 12 dB |
| 4. Une histoire de l'IA moderne en 30 secondes | 30 s | 1,1 | 24 % | 1,3 | 14 dB |
La tendance est nette. Les films devenus viraux bougent presque en permanence (85 à 98 % des images) et bougent beaucoup (mouvement moyen de 4,5 à 11,4), avec une coupe toutes les secondes, voire plus souvent. Nos vidéos explicatives, elles, marquent des pauses pour laisser le temps de lire : 24 à 38 % des images sont en mouvement, pour un mouvement moyen de 1,1 à 2,1. C'est une différence de genre, pas une note de qualité. Une vidéo explicative qui bougerait comme le film de la pastèque serait illisible, et nos deux films qui racontent une histoire plutôt que d'expliquer (le film du coucher et la comédie) se rapprochent nettement du groupe viral. Si c'est cette énergie-là que vous cherchez, demandez-la dans le prompt : du mouvement constant, une coupe sur chaque temps, rien à lire.
La colonne du volume est l'autre chiffre à regarder en face. Nos films ont une dynamique plus large (jusqu'à 14 dB) que la plupart des films viraux (6 à 7 dB), parce que les partitions sont écrites avec des sections et une coupure silencieuse : les coupes frappent plus fort, mais une frappe qui surgit du silence peut faire sursauter. C'est précisément ce que signale la vérification de synchro du skill soundtrack.
FAQ
Qu'est-ce qu'une animation sur canvas ?
Une animation sur canvas est une animation dessinée par du code sur un élément canvas HTML, image par image : une fonction peint l'image complète pour chaque instant, si bien que rien à l'écran n'est une image ou une vidéo importée. Les films de cette page sont des animations sur canvas dont le code a été écrit par Claude Opus 5.5, avec une musique synthétisée par ce même code.
Quelle longueur doit avoir un prompt d'animation sur canvas ?
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.
Ces exemples ont-ils été retouchés à la main ?
Non. Chaque film est la première prise livrée par l'agent à partir de la première phrase du prompt indiqué, défauts listés en dessous compris. Le film 7 est la deuxième version d'un exemple open source, dont le look a changé après la relecture d'un réalisateur ; cette relecture fait désormais partie de ce que l'agent de l'application fait lui-même.
Puis-je en faire un moi-même ?
Oui. Cliquez sur « Essayer ce prompt » sous n'importe quel exemple pour l'ouvrir dans le mode Animation d'iArt, ou installez le skill open source javascript-animation dans Claude Code. La méthode complète se trouve dans le guide pratique mentionné plus haut.
Pourquoi les films viraux bougent-ils tellement plus que ceux-ci ?
Ce sont des boucles et des histoires, pas des vidéos explicatives. D'après nos mesures, les films partagés présentent un mouvement visible sur 85 à 98 % des images ; les vidéos explicatives marquent des pauses pour qu'on puisse lire le texte, ce qui les situe entre 24 et 38 %. Si c'est l'effet recherché, demandez un mouvement constant et une coupe sur chaque temps.
Comment les mesures ont-elles été faites ?
Un court script réduit chaque film à 10 images par seconde, en 48×48 et en niveaux de gris, puis calcule la variation moyenne des pixels entre les images, la part des images présentant un changement visible, le nombre de coupes franches et la plage de volume de l'audio en décibels. Le même script a tourné sur tous les films, les nôtres comme les films publics.
À vous de jouer
Chaque film de cette page est issu d'une seule phrase, la première ligne de son prompt. Lancez le prompt entier pour un film proche de l'exemple, ou seulement la première ligne pour la version de l'agent. Prenez celui qui se rapproche le plus de ce dont vous avez besoin, changez le sujet et lancez-le dans le mode Animation d'iArt. Si vous préparez une série pour une chaîne, la page créateur de vidéos faceless présente les formats plus longs qu'iArt produit aussi, et la page vidéo explicative couvre les vidéos explicatives avec voix off.