JavaScript Animation Maker
Every frame drawn in code.
You just describe it.
An agent on Claude Opus 5.5 writes the JavaScript that draws every frame on a canvas
and composes the soundtrack in code. No images, no footage, no audio files, no terminal.
What is JavaScript animation?
A film written as code.
Drawn fresh every frame.
iArt.ai's Animation mode turns a one-sentence description into a JavaScript animation: a short film in which every frame is drawn on an HTML canvas by code that an agent on Claude Opus 5.5 writes. Nothing is imported: no images, no stock footage, no audio files. The whole picture is one function, draw(ctx, t), that paints the canvas for any moment t: characters, backgrounds, type, camera moves. The music and sound effects are synthesized in the same page with the Web Audio API.
iArt.ai puts that method in a browser tab. Its Animation mode is an agent on Claude Opus 5.5: you describe the film, it plans the beats and shots, writes the drawing code and the score, checks its own stills, and plays the result in your browser. There is no default style. The look comes from the subject and your words, so a payments explainer and a bedtime story for a two-year-old don't look alike.
Why it spread now: drawing a whole film in code leans on a model's spatial reasoning, taste, and ability to write long, careful code, and on its ability to look at its own frames and fix them. With Claude Opus 5.5, code-drawn films became good enough that people started sharing them, and "every frame in JavaScript" turned into its own genre.
For the full definition, see what JavaScript animation is. To do it yourself step by step, read how to make an animation with Claude Opus 5.5.
Showcase
Films drawn entirely in code.
Each film was made by iArt's Animation agent from the prompt under it. Every frame is canvas code; every note is Web Audio. Try a prompt and you get a film like it, not a copy of it.
“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 →“How do noise-cancelling headphones actually cancel noise? Short vertical explainer for TikTok, ~20s.”
Try this prompt →“Why is the sky blue? A 20-second explainer in the style of a 1950s science textbook.”
Try this prompt →“Opening sequence for my faceless YouTube bedtime-story channel 'Sleepy Lantern'. Cozy, 15 seconds, ends on the channel name.”
Try this prompt →“A 20-second bedtime animation for a 2-year-old: the moon tucks the stars into bed.”
Try this prompt →“¿Por qué la Luna cambia de forma cada noche? Un video corto para mi canal de ciencia para niños, texto en español.”
Try this prompt →How it works
Describe. Plan. Draw. Refine.
Here is what happens between your prompt and the first frame.
01
Describe the film
Say what you want in plain English: the subject, who it's for, the length, the tone. Pick 16:9, 9:16, or 1:1. Attach a photo if you want a character based on a real person or pet: the agent draws the character from it, and the photo itself never appears in the film.
02
It plans beats and shots
Before drawing anything, the agent writes a beat grid and a shot list set in one continuous world, plus one shared event list that both the pictures and the music read. That is why the cuts land on the beat.
03
It draws, scores, and checks
It writes the code that draws every frame on the canvas and the Web Audio score (music and sound effects), then reviews its own stills and a contact sheet for text collisions and blank frames before you see anything.
04
Edit, continue, export
Reply in chat to change anything; it edits the code and redraws. 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. Share a public link, or export an MP4 with the soundtrack on a paid plan.
Three engines
Which iArt engine should you use?
Animation is one of three ways to make a video in iArt. It is the right tool for drawn films and explainers, not for everything.
| Animation | Motion Design | AI Video | |
|---|---|---|---|
| How it's made | Code draws every frame on a canvas; the soundtrack is synthesized in code | Code animates typeset layouts (React + GSAP) | A generative video model renders the footage |
| Best for | Drawn, illustrated films and explainers | Motion graphics: exact text, data, brand, product | Cinematic, filmed-look shots |
| On-screen text | Exact (drawn by code) | Exact (typeset) | Drawn by the model; spelling can drift |
| Assets | None: no image, video, or audio files | Can use your images, logos, slides, and data | Generated footage |
| Voiceover | Not yet (music and sound effects only) | AI voiceover built in | AI voiceover |
Need narration or exact brand typography? Motion Design does both; see explainer videos.
Run it yourself,
or skip the setup.
The method is open source. If you live in a terminal, run it with your own coding agent. If you'd rather type a sentence in a browser, use Animation mode.
Claude Code + javascript-animation-skills
Our open-source skill pack teaches your coding agent the same method: beat grid and shot list, a drawing library, a Web Audio score, self-checks, and a render to MP4. Built and tested with Claude Opus 5.5.
- – Free and MIT-licensed; you bring your own Claude Code plan or API usage
- – Runs in Claude Code and other coding agents
- – Needs Node 18+, ffmpeg, Chrome, and playwright-core
- – The film is an HTML file you own and edit by hand
The same method, in a browser tab
Nothing to install, no terminal. Describe the film, watch it play, and change it by replying in chat.
- ✓ Runs at app.iart.ai, in the Create page's Animation tab
- ✓ Ask it to keep going for a longer film
- ✓ Draws a character from a photo you attach
- ✓ Share a public link; export MP4 with the soundtrack on a paid plan
What is JavaScript animation?
JavaScript animation, in the code-drawn sense, is a film where every frame is painted on an HTML canvas by code: a draw(ctx, t) function renders whatever should be on screen at time t, and the music and sound effects are synthesized with the Web Audio API. Nothing is imported: no images, no footage, no audio files. iArt's Animation mode is an AI animation generator that writes that code for you from a text prompt.
Which model does iArt's Animation mode use?
Claude Opus 5.5. The agent plans the beats and shots, writes the drawing code and the score, and reviews its own stills and contact sheet before showing you the film. The open-source version of the method, javascript-animation-skills, was also built and tested with Claude Opus 5.5.
How long can a film be?
Ask for the length you want. A longer film is built in parts in the same project, with the same characters, look, and score: ask it to keep going until it's done. The seed-to-tree film on this page was made in two parts and runs 40 seconds.
Does Animation mode add voiceover or narration?
Not yet. The soundtrack in Animation mode is music and sound effects synthesized in code. If you need narration, use iArt's Motion Design mode, which animates with React and GSAP code and includes AI voiceover.
Can I use my own images or photos?
You can attach a reference photo, and the agent draws a character from it; the photo itself never appears in the film. Otherwise nothing is imported and nothing is generated as an image: every mark on screen is drawn by code.
How much does it cost, and can I download the video?
New accounts get a $2 signup credit, enough to make one animation of up to about 30 seconds. Any film can be shared with a public link. Exporting an MP4 with the soundtrack, encoded in your browser, needs a paid plan (Pro is $20/month).
Is there a free, open-source way to do this?
Yes. javascript-animation-skills (github.com/iart-ai/javascript-animation-skills, MIT) is a set of Claude Code skills that teaches your coding agent the same method and renders the film to MP4 on your machine. It needs Node 18+, ffmpeg, and Chrome. iArt's Animation mode is the same approach without the setup.
Describe the film.
The agent draws every frame.
Every frame drawn in code, the score synthesized in code, nothing imported. Start with the $2 signup credit; export MP4 on a paid plan.