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. Each prompt below starts with the exact words that made its film.

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

How to write a prompt for a code-drawn animation

One sentence already makes a good film: the question it answers, who it is for, how long it runs and the format. For a more professional film, write the prompt as a short brief, in this order:

[One or two sentences: what the film is, how long, which format.]

IDEA: the one subject or device that carries the whole film.

0–2s: what is on screen, what moves and how, the exact words.
2–5s: …
(one line per beat, to the end)

LOOK: background and palette (hex codes), type, textures, composition.
MOTION: where it is fast, where it holds, how one shot hands over to the next.
SOUND: the music (tempo, instruments, mood) and a sound for each action. Say "No narration." if there is none.

The prompts in this guide are written this way: the first sentence is the one that made the film, and the rest describes that film second by second. In blind side-by-side comparisons on iArt's Animation mode (an AI model watched both films each way round), the full brief beat the opening sentence alone for five of the six films we tried, and tied on the sixth. It takes longer to make and uses more credits, because there is more to build. The quickest way to write one is to describe a film you like, second by second.

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 (MDN: Canvas API). 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(), whose seed cannot be chosen or reset (MDN). 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.

Three films where the look is named in the prompt, in plain words:

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.

Try this prompt in iArt →

The paper-collage look is the one Kevin Ngo's clip made popular; the story is our own.

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.

Try this prompt in iArt →

Inspired by @shfred0's ink animation.

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.

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

A short prompt that names the job is enough to start: the question the film answers, the audience, the length, and the format. You don't have to write the shot list, because planning it is the agent's first step (Step 3); writing it yourself, as in the brief above, gets you closer to the film you have in mind. Useful things to put in the opening sentence:

• 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 (TikTok's own specs recommend vertical 9:16 — TikTok for Business).
• 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.

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.

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.

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.

Try this prompt in iArt →

40 seconds, two parts, 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 half", "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 idea: an agent on Claude Opus 5.5 writes the storyboard, the film as code (typeset text, SVG and data, with a canvas layer for hand-drawn work like the films on this page) and the score, checks its own stills, and the film plays in your browser. What's different from doing it yourself:

• Longer films. Ask for the length you want; a longer film takes longer to generate and costs more.
• Edits are sentences. Reply with what to change; it edits the code and redraws.
• Your images. Attach screenshots, a logo or product photos and they appear in the film as they are; attach a photo of a person or a look you like and it becomes the reference for a drawn character or style. Say which. You can also give it your site's web address.
• Export and share. Share with a public link, or export an MP4 with the soundtrack mixed in, rendered in the cloud (1080p on Pro, 4K on Ultra). Overlays such as lower thirds export as a transparent WebM.
• Cost. A 20–30 second film costs about $0.60–$1.00 and takes about 4–5 minutes to generate, so the $2 signup credit covers two or three; exporting the MP4 needs a paid plan.
• Voiceover. Choose a voice in the message box and the film is narrated, with the picture timed to the words. Without a voice, the soundtrack is music and sound effects.

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

How long should the prompt be?

One or two sentences are enough for a good film: what it is, how long it runs, the format and the moment that matters. For a more professional film, add a short brief of about 300 to 450 words: the one idea that carries the film, the shots second by second with the exact on-screen words, the look, the motion, and a sound for each action. A brief takes longer to make and uses more credits.

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, ask for the length you want; a longer film takes longer to generate and costs more.

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?

Yes. In iArt's Animation mode, choose a voice in the message box; the agent writes the lines, records them and times the picture to them. Without a voice, the soundtrack is music and sound effects.

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. For motion graphics in particular (a showreel, a logo reveal, kinetic type, a 3D loop and a data story), see these Claude motion graphics prompts. And if what you need is specifically an explainer, start from the explainer video maker.