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 le prompt exact dont il 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.
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.
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.
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, 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.
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 : 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.
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.
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.
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), 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.
Ces exemples ont-ils été retouchés à la main ?
Non. Chaque film est la première prise livrée par l'agent à partir 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 prompt de cette page tient en une phrase. 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.