About this skill
JavaScript Animation is an open-source pair of skills from iart.ai. The agent plans a beat grid and a storyboard as data, draws each frame as a pure function of time on a canvas, and writes the soundtrack with Web Audio in the same file. Scripts then prove that nothing is loaded, find colliding text, and check that cuts land on the beat.
You say
Make a 20-second animated film about how a bug report becomes a fix. Every frame in code, with its own soundtrack.
How it works
- Your agent picks a look from the subject, then writes the tempo, shots and sound events as data inside one HTML page.
- It draws every frame as a pure function of time on a canvas, and writes the music in the same file with Web Audio.
- Scripts render the MP4, prove nothing is loaded, flag colliding text and check the cuts against the beat, then it reviews stills by eye.
Getting a good result
- Ask for one specific idea, not a style. A small story with a cause and a punchline holds up better than a list of effects.
- Run it from a project with playwright-core installed, not from the skill folder, so the scripts can find a browser.
- Look at the contact sheet before the full render. Fixing a frame costs one still, and a full render costs minutes.
What you get
- The javascript-animation and soundtrack skills at a pinned commit
- A starter page with a drawing library and a storyboard skeleton
- Scripts to render, audit assets, and check layout and sync
- The MIT license and attribution
Good fit
- Short stories, explainers and loops
- Projects that cannot depend on stock media or an API key
Not for
- Charts from live data, or 3D scenes
- Photorealistic video and realistic voices
How to install it
- Download the ZIP and unzip it.
- This ZIP holds two skills. Move both javascript-animation and soundtrack into your skills folder, side by side, because the self-check calls the soundtrack skill's script. Keep LICENSE and ATTRIBUTION.md with them.
- Start a new session and ask for what you want to make.
Needs: An agent that reads skills and can look at images, Node.js 18 or newer, FFmpeg, Chrome and playwright-core.
Popular on X
Posts showing demand for this kind of video. Unless a post names this tool, it wasn't made with it.
- A repo of 475 Opus 5.5 demos, from canvas to 3D and games 362,310 views on X, measured 2 November 2026
- A list of 19 motion repos, naming iart.ai's motion-skills index, which lists this pack 3,100 views on X, measured 2 November 2026
FAQ
Is it really free?
Yes. Create a free AdAnt account to download the ZIP. There is no card and no trial timer.
Does it depend on the model?
Heavily, as its authors say. They built and tested it with Claude Opus 5.5, and its self-check needs a model that can see images. Expect cruder drawings from weaker models.
Can I use my own music?
Yes. You can mux your own track and move the cuts to fit it. The skill also documents AI music through OpenRouter, which needs your own key and is off by default.
Can I get it without signing up?
Yes. The original is public on GitHub, linked on this page. AdAnt's download is a pinned, read copy in one ZIP.
Related skills
HyperFrames: HTML to Video
Have Claude write launch films, explainers and title cards as HTML, then render them to MP4.
Vertical Ad Motion Graphics
Direct and build a 9:16 motion graphics ad that works on mute, with no footage.
GSAP Animation Core
Give your agent GreenSock's official guidance for timing, easing and stagger.