Canvas Animation Examples: 7 Films Drawn Frame by Frame in JavaScript, With the Prompts and What We Measured
Since Claude Opus 5.5 came out, "every frame drawn in JavaScript" has become a genre: short films where a program paints each frame on an HTML canvas and the music is synthesized in the same page. This article is a set of canvas animation examples made that way, in iArt's Animation mode and with the open-source skill, each shown with the exact prompt that produced it and what we'd fix. At the end there's a table where we ran the same measurement script over our films and over four of the films that went around on X, so you can see how they actually differ.
Unmute for the soundtrack: it's code too. The prompts on this page are shown in their original English; the app accepts prompts in any language.
What these examples have in common
Every film below was made by an agent on Claude Opus 5.5 from a one-sentence prompt, with no image, footage or audio files. The agent planned a beat grid and a shot list first, then wrote the drawing code and the score, then checked its own contact sheet before finishing. Nothing was edited by hand afterwards. That's why each caption lists a flaw: the flaws are what the first take actually contains. The method is explained step by step in how to make an animation where every frame is drawn in JavaScript, and the term itself in the JavaScript animation glossary entry.
1. How ChatGPT picks the next word (9:16 explainer)
How does ChatGPT actually pick the next word? A 25-second vertical explainer for TikTok, no jargon.
What to look at. The film shown above. The agent turned "pick the next word" into a prize wheel whose slice sizes are the odds, and the wheel is the whole explanation: read, odds, spin, add, then the loop again for the next word. A step tracker stays at the top so you always know where you are. The odds on screen are labelled as made-up example numbers, and in one of the fast repeats the second-likeliest word wins, to show it isn't always the top pick.
What we'd fix. It says "word" throughout; ChatGPT really picks word-pieces, which the agent left out to stay jargon-free. The lower third of the frame is fairly empty for the first seven seconds.
2. How your phone knows where you are (1:1 explainer)
How does your phone know where you are? A 25-second GPS explainer for my science Instagram, playful but accurate.
What to look at. "Playful but accurate" became a risograph science-zine look: flat blue and pink inks on cream paper, a small pink phone as the character. The physics is right and drawn to scale: about 30 satellites at 20,200 km, a signal timed at 0.070 s becoming 21,000 km, three distance circles crossing at the phone, then the catch that the phone's own clock is off and a fourth satellite fixes it. The soundtrack is marimba and woodblock percussion with a sound for every pop, pulse and pin.
What we'd fix. Positioning is drawn as flat circles rather than spheres, the standard simplification. In the wide shots the phone is about 30 px tall, so its "listening" pose barely reads, and the fourth satellite itself stays off-screen while its circle arrives.
3. The half second after you press Enter (16:9 explainer)
What happens in the half second after you type a website address and press Enter? A 30-second explainer for our developer newsletter.
What to look at. One continuous network map that the camera moves through: DNS, then the TCP handshake as SYN / SYN-ACK / ACK chips on a wire, then TLS with a certificate check and a padlock, then GET / and 200 OK, then the page painting. Each message is a chip showing what it literally says. Amber for what the browser sends, off-white for replies, and green only once the line is encrypted. The example address resolves to 203.0.113.42, a range reserved for documentation, so it isn't anyone's real server.
What we'd fix. In the wide shots the chips are 25–35 px on screen, small on a phone. The first 3.7 seconds are fairly still (just the question and the typing), and the film simplifies: no DNS caching, no HTTP/3.
4. A 30-second history of modern AI (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.
What to look at. Six eras, one shot each, with a timeline bar tracking the year along the bottom: the 2017 paper with attention drawn as arcs between the words of its title, GPT and BERT in 2018, model sizes drawn as squares whose area matches their parameter counts (117M, 1.5B, 175B), a chat window in 2022, a reasoning model counting the r's in "strawberry", and a coding agent whose tests pass. The agent kept the on-screen facts to ones it was sure of and used no product names after 2022.
What we'd fix. The closing pull-out shrinks the six eras to thumbnails that don't read, and the 29 px captions are small on a phone. It's also the darkest film here, and the one where the model's house taste (a deep-blue ground with amber accents) shows most.
5. The moon tucks the stars in (1:1, for a two-year-old)
A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.
What to look at. Same engine, opposite register: rounded characters, big eyes, a moon in a nightcap, and almost constant gentle motion. In the measurement table below this is the one film of ours that moves as much as the viral ones. "Playful for a two-year-old" is a brief the agent reads as a look, not just a topic.
What we'd fix. The soundtrack has the smallest loudness range of the set (about 4 dB), which is right for bedtime but means the cuts land softly rather than on a beat you can feel.
6. Why the Moon changes shape (1:1, Spanish)
¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.
What to look at. A Spanish prompt gets a Spanish film, with the on-screen text typed exactly because text is drawn by code, not by a video model. The explanation is the correct one (the Moon has no light of its own; we see a different slice of its lit half each night; the cycle is about 29 and a half days), drawn as a Sun–Earth–Moon diagram with "how we see it" insets.
What we'd fix. At 40 seconds it's the longest film here and the stillest after the AI history: 37% of its frames have visible motion. A children's channel would want more movement between the diagram beats.
7. "I only asked you to fix one line" (open-source example)
What to look at. This one was made with the open-source javascript-animation skill in Claude Code rather than in the app, and it's a comedy rather than an explainer: someone asks for a one-line typo fix at 01:58 and goes to bed, and by 08:30 the codebase is a skyline. It's one 81 KB HTML file; every note and sound effect is synthesized by the same file. The repo's checks measured 14 of 14 cuts on the beat and no text collisions across 300 sampled frames.
What we'd fix. The first pass of this film read as childish (rounded, outlined, chibi) and had text sitting on objects; the version here is the second pass, in a flat cinematic look with construction lines. It took a director's review to get there, which is the step the app now does for you.
What we measured: our films vs. the ones that went around
We ran one script over every film in this article and over four of the films shared on X after the Opus 5.5 launch. It downsamples each film to 10 frames per second on a 48×48 grayscale thumbnail and measures four things: mean motion (average pixel change between consecutive frames; higher means more happens per second), frames with motion (the share of 0.1-second steps with visible change), hard cuts per 10 seconds, and loudness range (decibels between the loudest second and a quiet one). For the public films we only report our measurements and link the original posts; we don't re-host them.
| Film | Length | Mean motion | Frames with motion | Hard cuts / 10 s | Loudness range |
|---|---|---|---|---|---|
| Watermelon (Kevin Ngo, shared by @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. The moon tucks the stars in | 20 s | 4.8 | 80% | 6.0 | 4 dB |
| 7. I only asked you to fix one line | 30 s | 3.5 | 52% | 6.0 | 14 dB |
| 1. How ChatGPT picks the next word | 26 s | 2.1 | 38% | 1.9 | 12 dB |
| 2. How your phone knows where you are | 25 s | 1.4 | 26% | 2.0 | 8 dB |
| 6. Why the Moon changes shape | 40 s | 1.2 | 37% | 1.5 | 6 dB |
| 3. The half second after you press Enter | 30 s | 1.2 | 33% | 1.0 | 12 dB |
| 4. A 30-second history of modern AI | 30 s | 1.1 | 24% | 1.3 | 14 dB |
The pattern is plain. The films that went viral move almost all the time (85–98% of frames) and move a lot (mean motion 4.5–11.4), with a cut every second or faster. Our explainers hold still so you can read: 24–38% of frames have motion, and mean motion is 1.1–2.1. That is a genre difference, not a quality score. An explainer that moved like the watermelon film would be unreadable, and the two films of ours that are stories rather than explainers (the bedtime film and the comedy) sit much closer to the viral group. If you want the viral feel, ask for it in the prompt: constant motion, a cut on every beat, no reading.
The loudness column is the other honest number. Our films have wider dynamics (up to 14 dB) than most of the viral ones (6–7 dB) because the scores are written with sections and a silent break, which makes the cuts land harder but can startle if a hit comes out of silence. The soundtrack skill's sync check flags exactly that.
FAQ
What is a canvas animation?
A canvas animation is an animation drawn by code onto an HTML canvas element, frame by frame: a function paints the whole picture for each moment in time, so nothing on screen is an imported image or video. The films on this page are canvas animations whose code was written by Claude Opus 5.5, with the music synthesized by the same code.
Were these examples edited by hand?
No. Each film is the agent's first delivered take from the prompt shown, including the flaws listed under it. Film 7 is the second pass of an open-source example, where a director's review changed the look; that review is now part of what the app's agent does itself.
Can I make one of these myself?
Yes. Click "Try this prompt" under any example to open it in iArt's Animation mode, or install the open-source javascript-animation skill in Claude Code. The full method is in the how-to guide linked above.
Why do the viral films move so much more than these?
They are loops and stories, not explainers. Our measurements show the shared films have visible motion in 85–98% of frames; explainers pause so text can be read, which lands them at 24–38%. Ask for constant motion and cuts on every beat if that's the feel you want.
How were the measurements made?
A short script downsamples each film to 10 frames per second at 48×48 grayscale and computes the mean pixel change between frames, the share of frames with visible change, the number of hard cuts, and the loudness range of the audio in decibels. The same script ran over every film, ours and the public ones.
Make your own
Every prompt on this page is one sentence. Take the one closest to what you need, change the subject, and run it in iArt's Animation mode. If you're making a series for a channel, the faceless video maker page shows the longer-form formats iArt also produces, and the explainer video page covers narrated explainers.