javascript-animation-skills plugin
Two skills for short films where every frame and the music are computed in code on canvas, with no images or keys, rendered to MP4
- 61 ★ on the repository
- Last commit
Extended access
Why this level
- The skills run Node scripts, open pages in a browser through Playwright and write files and renders into the project.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/javascript-animation-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skills run Node scripts, open pages in a browser through Playwright and write files and renders into the project.
This is third-party code. Review the repository files before installing.
What it does
`javascript-animation-skills` is a pack of two agent skills. `javascript-animation` draws short films on an HTML canvas: stories, explainers, loops and picture books from your photos. It has a drawing library (ink, picture-book illustration, spot-color print, single-line engraving, words as shapes), a frame-by-frame page-to-MP4 harness, contact sheets and a zero-asset audit. `soundtrack` writes music with Web Audio inside the page and renders it offline to WAV. The agent first derives a look from the subject, then writes a beat grid and shot list as data and computes every frame as a function of time. Before handing over it checks A/V sync (cuts on the beat), text layout and the frames against the storyboard.
Who it is for. Makers of short animations and explainers who need a self-contained HTML file with no stock art and no paid generation.
Good fit when
- A 30 to 40 second hand-drawn explainer is drawn entirely in code
- A few photos become an animated story or a day in a pet's life
- Music is written in code and cuts are placed on the downbeat
- A film with no images, fonts or keys is needed in a single HTML file
Not a fit when
- You need photorealistic art or live footage
- The agent cannot look at images, since the self-check reads contact sheets
- The task needs a ready video editor with a timeline
Example request
Make a 40-second explainer on why babies love black-and-white cards: hand-drawn look, every frame in code, a music-box soundtrack.Limitations
It needs Node 18 or newer, `playwright-core`, `ffmpeg` and Chrome (or Chromium through `npx playwright install chromium`). No keys are needed. The author built and tested the pack on Claude Opus 5.5 and has not tried other models, and weaker ones should be expected to draw more crudely. The self-check needs a model that can look at images. The full agent is hosted on iart.ai, and the README links its paid pages. Characters and likenesses from photos are handled only when the task itself asks.
How to disable. Remove the skills with your skill manager or delete the `javascript-animation` and `soundtrack` folders from the skills directory. Renders and HTML files stay in your project.
FAQ
How do I install it?
Run `npx skills add iart-ai/javascript-animation-skills`, or add the marketplace with `/plugin marketplace add iart-ai/javascript-animation-skills` and install `/plugin install javascript-animation-skills`.
Are keys or images needed?
No. The film is a single HTML file, sound is synthesized with Web Audio, and a separate audit checks for external assets.
Which agents does it run in?
The README names Claude Code, Cursor, Codex and over 40 more agents.
What does the agent check before handing over?
Absence of external assets, sync between sound and cuts, text collisions, a still per shot and an overall contact-sheet review.
Can I use my own music?
Yes, `soundtrack` also works with AI-generated or your own music, and the cut-to-beat sync check applies to any audio.
Discussion
No questions or reviews yet.
Related
PluginsTwelve skills that make an agent build single-file HTML animations: slides, protocol diagrams, architecture diagrams and demos for screen recording
A skill for Claude Code and Codex: the agent writes animation scenes, a browser player shows them, export to MP4 and Lottie.
A Claude Code skill for short animated videos drawn in code: seven styles, story and storyboard sign-off, voice-over and an MP4 render
A skill for promo films and kinetic type: idea and storyboard before the build, MP4 rendered through Chrome and ffmpeg, checked by six gates
A skill set for writing video in TypeScript and rendering it on the GPU with no browser: compositing, motion graphics, 3D.
A skill and CLI that let Claude Code or Codex make videos as web pages, with the Studio editor to change the result
README in short
The documentation shows example films and a gallery, install steps, the two skills, the agent workflow, activation phrases, example prompts, model requirements and links to other packs in the iart collection.