JavaScript Animation Maker
Every frame drawn in code.
You just describe it.
An agent on Claude Opus 5.5 writes the JavaScript that renders every frame
and composes the soundtrack in code. No keyframes, no timeline, no terminal.
What is JavaScript animation?
A film written as code.
Rendered 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 rendered by code that an agent on Claude Opus 5.5 writes. Type is set as real text, shapes and paths are drawn in SVG, and a canvas layer paints anything hand-drawn, particles or textures; each frame is a function of time, so the film plays, seeks and exports the same way. The music and sound effects are synthesized in code 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 animation 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.
Claude Motion not on your plan? See four ways to make the same kind of animation without it.
Showcase
Films drawn entirely in code.
Each film was made in iArt's Animation mode from the prompt under it, with every frame and every note written in code. 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 →“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.”
Try this prompt →“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.”
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 your screenshots or logo to show them in the film, or a photo to base a drawn character on.
02
It plans beats and shots
Before writing any code, the agent decides the shots: what each one shows, how long it holds, and where the cuts and sound hits land. The pictures and the music read the same timings, which is why the cuts land on the beat.
03
It draws, scores, and checks
It writes the code that renders every frame and the Web Audio score (music and sound effects), then reviews its own stills and a contact sheet for cropped text, collisions and blank frames before you see anything.
04
Edit, continue, export
Reply in chat to change anything; it edits the code and renders again. Share a public link, or on a paid plan export an MP4 with the soundtrack or a transparent WebM for overlays.
Two engines
Which iArt engine should you use?
Animation is one of two ways to make a video in iArt. It is the right tool when the words, data and timing must be exact, not for filmed-look footage.
| Animation | AI Video | |
|---|---|---|
| How it's made | Code renders every frame (typeset text, SVG, a canvas layer); the soundtrack is synthesized in code | A generative video model renders the footage |
| Best for | Explainers, motion graphics, illustrated films, overlays | Cinematic, filmed-look shots |
| On-screen text | Exact (typeset in code) | Drawn by the model; spelling can drift |
| Assets | None needed; your screenshots, logos, images and clips can appear too | Generated footage |
| Voiceover | AI voiceover (choose a voice) | AI voiceover |
Making an explainer with exact brand typography or data charts? 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 for any length; long films are split into scenes
- ✓ Shows your screenshots, logo or site, or draws a character from a photo
- ✓ Optional AI voiceover
- ✓ Share a public link; export an MP4 with the soundtrack, or a transparent WebM for overlays, on a paid plan
What is JavaScript animation?
JavaScript animation, in the code-rendered sense, is a film where every frame is produced by code: a function of time decides what is on screen at each moment, using typeset text, SVG shapes and canvas drawing, and the music and sound effects are synthesized with the Web Audio API. 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 animation 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 split into scenes in the same project, with the same look and score, and you can change any scene afterwards by replying in chat. The seed-to-tree film on this page runs 40 seconds.
Does Animation mode add voiceover or narration?
Yes. Choose a voice in the message box and the film is narrated, with the picture timed to the words. Without one, the soundtrack is music and sound effects synthesized in code.
Can I use my own images or photos?
Yes. Screenshots, logos, product photos and short screen recordings you attach appear in the film as they are; a photo of a person or a look you like is used as a reference for a drawn character or style. You can also give it your site's web address.
How much does it cost, and can I download the video?
New accounts get a $2 signup credit. $2 is enough for a film under 30 seconds. Any film can be shared with a public link. Exporting an MP4 with the soundtrack needs a paid plan (Pro is $20/month). Overlays, such as lower thirds, export as a transparent WebM instead.
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 writes every frame.
Every frame and the score written in code. Start with the $2 signup credit; export MP4 on a paid plan.