How to Make an Animation Where Every Frame Is Drawn in JavaScript (the Claude Opus 5.5 Way)

The week Claude Opus 5.5 came out, one kind of clip kept getting shared: short animated films with a caption like Kevin Ngo's, "Claude Opus 5.5 drew every frame of this animation in JavaScript". No image files, no stock footage, no video model. There's a program that draws each frame on a canvas, and the music is synthesized by the same page. This guide explains how those films are made and gives you two ways to make one: in Claude Code with an open-source skill, or in iArt's Animation mode with no terminal at all. Every film below was made from the exact prompt shown.

"What actually happens in the 2 seconds after you tap your card at a checkout? 25-30s explainer for our fintech blog." The whole prompt. Every shape, label and the running "real time since tap" clock is drawn by code. Unmute for the soundtrack, which is synthesized in code too. The only flaw I found frame by frame is a stray red shard at the top edge during one camera move, around 10 seconds in.

What "every frame drawn in JavaScript" actually means

A JavaScript animation of this kind is a single function, draw(ctx, t), that paints the whole picture for time t onto an HTML canvas. It keeps no state between frames and loads no images. Because each frame depends only on the time, a headless browser can jump to frame 1, 2, 3… and capture each one into an MP4, frame-accurately, however slow a frame is to draw.

Three details make these films look hand-made rather than like a screensaver:

• Seeded randomness. Lines wobble and fills look inked because the drawing code uses a random generator with a fixed seed instead of Math.random(). The wobble is the same every time you render, so frames don't flicker.
• Music in code. The soundtrack is written with the Web Audio API in the same page: drums, bass, pads and a synthesized sound for each action. It's rendered offline and mixed into the video, so no audio files are needed.
• One timeline for picture and sound. The films that feel "on the beat" put the tempo, the shot list and a list of events (a door slams, a number lands) in one data structure that the drawing code and the music code both read. Sound lands on the action because they share the same timing data.

That makes it different from the two things it's usually confused with:

Step 1: Start from a subject, not a style

The films that went around look very different from each other, and that's the point. When we tested this across fourteen films on six subjects, the subject and the words in the prompt decided the look more than anything else did. Style presets and example images pulled everything toward one look. The model also has a house taste: a deep-blue background with amber accents kept showing up even after we removed every hint of it from the instructions.

So say what the film is about, who it's for, and where it will run. If you want a particular look, name it in plain words ("in the style of a 1950s science textbook") rather than attaching a mood board. If you don't care, say nothing and expect the blue and amber.

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

Try this prompt in iArt →

One sentence in, a textbook page out: numbered figures, captions, a running header, a pencil-hatched sky. The physics holds up (short blue waves scatter roughly six times more than long red ones). The captions type on letter by letter, so a paused frame often shows half a sentence.

Step 2: Give it the job, the length and the frame

The prompts that worked best in our tests were short and specific about the job: the question the film answers, the audience, the length, and the format. You don't need to write the shot list; planning it is the agent's first step (Step 3). Useful things to include:

• The question or story: "how do noise-cancelling headphones actually cancel noise?"
• Length and platform: "short vertical explainer for TikTok, ~20s". The platform also tells it the aspect ratio.
• Who it's for: "for a 2-year-old" and "for our fintech blog" produce very different pacing and drawing.
• Exact words, if any must appear: a channel name, a tagline. Text is typed, so it comes out spelled the way you wrote it.

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

Try this prompt in iArt →

9:16, 22 seconds, three steps and a catch ("best on steady hums like engines & fans"), then "Hear it. Flip it. Play it. Quiet." The push into the ear cup around 7–10 seconds crowds the frame: the headband fills half the screen for a moment.

Step 3: Plan the beat grid and the shots before any drawing code

This is the step that separates a film from a loop of moving shapes. Before writing drawing code, the agent writes the plan as data:

1. A beat grid: a tempo and sections (intro, build, peak, a short silent break, ending). Cuts are placed on downbeats.
2. A shot list with blocking: typically 10–20 shots, each with its camera position, in one continuous world. The seed-to-tree film below is one soil-and-sky world that the camera moves through, not separate slides.
3. One event list that the drawing code and the music both read.

In the open-source example "I only asked you to fix one line", that plan is 120 bpm, 15 shots and about 20 synthesized sound effects. The sync check measured 14 of 14 cuts on the beat, and the layout check found no overlapping text across 300 sampled frames.

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.

Try this prompt in iArt →

40 seconds, two acts, one score. The camera follows the seed through the soil and up into a full year of seasons. It kept the seed's little face on the trunk all the way to the final tree. That was the agent's choice, not botany.

Step 4: Check it like a director, then fix it in words

A model writing thousands of lines of drawing code will make visual mistakes it can't see in the code: a caption sitting on a character, a scene that stays still for four seconds, a cymbal crash that makes you jump. The workflow that works is to render and look:

• A contact sheet: one still every half second on a single image. Check pace, framing and dead air at a glance (the flaws described under each film on this page were found this way).
• Automatic checks: no loaded assets, text not colliding with text or objects, cuts on the beat, no sudden jump in loudness.
• Then say what to change: "the captions are too small on mobile", "slow down the second act", "less orange". The agent edits the code and renders again.

The most common first-draft problems in our tests: characters with thick rounded outlines that read as childish, text drawn on top of objects, long stretches where nothing moves, and isolated loud hits in the music. A hit inside a steady groove sounds fine; the same hit after silence is startling.

Way 1: Claude Code with the open-source skill

If you're comfortable in a terminal, everything above is packaged as two free agent skills in iart-ai/javascript-animation-skills (MIT): javascript-animation (the drawing library, storyboard workflow, render-to-MP4 and self-checks) and soundtrack (Web Audio music on a tempo map, plus the sync check).

# Any coding agent (Claude Code, Cursor, Codex…)
npx skills add iart-ai/javascript-animation-skills

# Or as a Claude Code plugin
/plugin marketplace add iart-ai/javascript-animation-skills
/plugin install javascript-animation-skills

Requirements: Node 18+, playwright-core, ffmpeg and Chrome. No API keys. Then ask in plain words:

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

The output is one HTML file you can open in a browser, plus the rendered MP4.

"I only asked you to fix one line": an agent turns a one-line typo fix into a city overnight. One 81 KB HTML file; every note and sound effect is synthesized with Web Audio.

The skills were built and tested with Claude Opus 5.5. They also install into Cursor, Codex and other agents, but we haven't tested other models with them. Drawing a whole film leans hard on spatial reasoning and on the model reviewing its own contact sheets, so use the strongest vision-capable model you have.

Way 2: iArt's Animation mode, no code

If you'd rather not set up a terminal, iArt runs the same method as a product. Open Create → Animation, type the prompt, pick 16:9, 9:16 or 1:1, and send. Under the hood it's the same approach: an agent on Claude Opus 5.5 writes the storyboard, the drawing code and the score, checks its own stills, and the film plays in your browser. What's different from doing it yourself:

• Longer films. For a longer film, ask it to keep going: it adds the next part in the same project, with the same characters, look and score.
• Edits are sentences. Reply with what to change; it edits the code and redraws.
• Reference photo. Attach a photo and the agent draws a character from it. The photo itself doesn't appear in the film.
• Export and share. Share with a public link, or export an MP4 with the soundtrack mixed in, encoded in your browser.
• Cost. The $2 signup credit is enough for an animation of up to about 30 seconds; exporting the MP4 needs a paid plan.
• Not yet. Voiceover isn't available in Animation mode; the soundtrack is music and sound effects. If you need narration with exact on-screen text, iArt's Motion mode also animates by writing code (React and GSAP rather than a canvas) and supports AI voiceover; see AI explainer videos.

"Opening sequence for my faceless YouTube bedtime-story channel 'Sleepy Lantern'. Cozy, 15 seconds, ends on the channel name." A code-drawn channel intro, and a good use for this style on a faceless channel.

FAQ

Can Claude make animations?

Yes. Claude Opus 5.5 can write JavaScript that draws every frame of a short film on an HTML canvas, with a soundtrack synthesized by the Web Audio API in the same file. The code is then rendered frame by frame to MP4. Films like the ones shared after the Opus 5.5 launch are made this way, with no image assets.

Do I need to know how to code?

No. In Claude Code the agent writes all the code from a plain-language prompt, though you'll need to install a few tools. In iArt's Animation mode you only type the prompt in a browser.

Which model should I use?

The open-source skill and iArt's Animation mode were both built and tested with Claude Opus 5.5. Other models haven't been tested; expect cruder drawings from weaker ones. The model needs to handle images, because it reviews its own stills.

How long can a code-drawn animation be?

With the skill, as long as you ask for, though longer films take longer to plan and check. In iArt's Animation mode, a longer film is built in parts in the same project: ask it to keep going until it's the length you want.

Where does the music come from?

It's written in code with the Web Audio API: percussion, bass, pads and a synthesized sound for each on-screen action, all on a tempo map so that cuts land on the beat. It's rendered offline and mixed into the MP4. The skill can also work with a music file you supply.

Can I add a voiceover?

Not in iArt's Animation mode yet; the soundtrack is music and sound effects. iArt's Motion mode, which animates with React and GSAP code, supports AI voiceover if you need narration now.

Make yours

Pick the prompt on this page that's closest to what you need, change the subject, and run it: in Claude Code with the open-source skill, or in iArt's Animation mode with nothing to install. Then look at the first take the way a director would, and say what to change. More films and their prompts are on the JavaScript animation maker page.