Animate skill
A Claude Code skill for short animated videos drawn in code: seven styles, story and storyboard sign-off, voice-over and an MP4 render
- 1,066 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Runs Node, Playwright's Chromium and ffmpeg on your machine and writes piece files into the project folder
- Searches the web for facts and takes screenshots of pages whose link you give it
- Voice lines go to the external ElevenLabs service if you connect its connector
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/animateDetects 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.
- Runs Node, Playwright's Chromium and ffmpeg on your machine and writes piece files into the project folder
- Searches the web for facts and takes screenshots of pages whose link you give it
- Voice lines go to the external ElevenLabs service if you connect its connector
This is third-party code. Review the repository files before installing.
What it does
Animate makes short animated videos entirely from code: a single `canvas`, procedural graphics and music, frames computed deterministically, and the finished video assembled into MP4 through Playwright's Chromium and ffmpeg. The skill starts with a command such as `/animate a 45-second history of the bicycle, cut paper`. It asks a few questions about the topic, formats, voice, style and your music, shows a style gallery and starts animating only after three sign-offs. The three sign-offs go in order. First the story: the format of the piece and a numbered table of beats, with facts checked by web search. Then the look: two to four full-size frames, and for a new style side-by-side comparisons with your references. Then the storyboard: every beat as a key frame with its sound and its transition into the next, and you approve or reject panels by number. After that the skill animates the approved panels, builds the `index.html` file, aligns the voice-over word by word and renders the video. The skill measures readiness: the `review.mjs` script checks that cuts land on the beat grid, how loudness is distributed, whether text is cut off or runs under the phone interface. One piece comes out in 9:16, 1:1, 4:5 and 16:9, each laid out separately. It maps your own music by beats and cuts scenes to them, and it captures real screens of your product from a page and animates them inside the chosen style.
Who it is for. For marketers, designers and founders who need short explainers and vertical promo videos, and for developers ready to build them from code in Claude Code.
Good fit when
- You need a 20 to 60 second piece with a history, an explanation of a principle or a product launch, and you have no After Effects or studio
- The video has to come out vertical, square and wide at once, so the frame is not cropped for each platform
- You have a finished track and the scenes should cut on its beats, with the loudest moment on the payoff
- You need to repeat a look from your references: the skill measures palette, line, texture and cut rhythm and saves the style in your project
Not a fit when
- You need to edit recorded footage from finished clips: Animate draws frames in code and does not work with shot material; video-use in the catalog handles editing
- You need a three-dimensional scene: the author only promises a WebGL style with ray marching, and the seven built-in styles are two-dimensional
- You cannot install Node 18 or newer, Chromium for Playwright and ffmpeg: without them the skill names the install command and stops
- You need a video in a couple of minutes: the questions and three sign-offs come first, and the build comes only after
Example request
/animate a 45-second explainer of how a hash table works, in the math style, 16:9Limitations
Version 0.4.0, MIT license. The skill is built for Claude Code: the project description names no other agent.
It needs Node 18 or newer, Playwright with Chromium (`npm i -g playwright && npx playwright install chromium`) and ffmpeg on PATH. A voice-over also needs Python with `faster-whisper`, which times every word; without it the word times are estimated.
The voice for lines comes from the ElevenLabs connector in Claude or from your own recording, and the connector has to be enabled separately in Claude settings. A three-dimensional WebGL style is listed as planned, while the export and review scripts already run WebGL pieces on the GPU and warn when only software rendering is available.
The skill cannot listen to the finished soundtrack and says so in its report, so listen to the sound yourself. Every claim on screen is checked by web search and recorded with its source in the brief.
How to disable. If you installed it as a plugin, run `/plugin uninstall animate@animate`. If you copied the folder by hand, delete `~/.claude/skills/animate/`. The pieces stay in your project under `pieces/` and you remove them yourself.
FAQ
Which styles come built in?
Seven: cut paper, crosshatch ink, riso print, sketchbook, a manim-style math look, pixel and isometric. The eighth slot is built from your references: a video, stills or a web page.
How do I make a video to my own music?
Put the track in the piece folder and mention it when the skill asks its questions. It maps the tempo, bars, big hits and drops, cuts scenes on the beats and puts the payoff on the loudest hit. Reference media stays on your machine.
What does the review of a finished piece show?
The `review.mjs` script produces contact sheets per shot and measures: whether cuts land on the grid, how loudness moves through the story, the hero's placement in the frame, the silence before the payoff and its loudest moment, and text that is cut off or overlapping.
Can I put screens of my site into a video?
Yes. The skill captures a page with the `capture.mjs` script or takes logo files and animates the real screens inside the chosen style. Screenshots go into the piece's `assets/` folder.
Where do the results end up?
Pieces are created in your project under `pieces/<name>/`. That folder gets the brief, a log, the scene sources and the built `index.html`, and `renders/` holds the final `final.mp4` and the `share.mp4` for publishing.
Discussion
No questions or reviews yet.
Related
SkillsTwo Claude Code skills for videos made entirely in code: hand-painted watercolour animation and kinetic typography reels
A Claude Code and Codex skill that turns a topic into a narrated motion-graphics explainer video on Remotion with subtitles and chapters
Fifteen Claude Code skills for launch films, animated charts and reels made entirely from code, with no After Effects
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 that turns Chinese story copy or a set of ordered images into a vertical hand-drawn animation, a silent diary-comic picture track
A skill that turns an article, README or website into a vertical HyperFrames promo video: brief and approval first, then assets, build and review
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Animate (this entry) | no | 1,066 | |
| Claude Motion Design | no | 720 | motion videos in plain code with HTML, Playwright and ffmpeg, without After Effects or Remotion |
| anything2explainer | no | 2,835 | turns a topic into a narrated explainer video on Remotion with subtitles and chapters |
| video-use | no | 30,032 | edits existing footage: cuts pauses, color grading, subtitles |
README in short
The repository describes the skill's steps from questions to delivery, a style table, what is in the kit (story grammar, render kit, tools, craft rules, voice-over, music, formats), requirements and two ways to install. It lists the tool commands and a sixty-second example piece about the history of AI. Every style comes with its rules, a sample and a small demo piece.
README badge
Original SKILL.md
--- name: animate description: Make a short procedural animation in any style — an explainer, a history, a little story — as a single-file canvas video with a synthesized score, rendered to MP4. Ships with styles (cut paper, crosshatch ink, riso print, sketchbook, manim-style math, pixel art, isometric line art) and makes new ones from the user's references. Walks the user through intake, then three check-ins (story, look, storyboard) before animating, and proves the result with measured review checks. Use when the user asks for an animated video, short, explainer or reel made in code, or wants a look matched from references. argument-hint: "[what the video is about] [style or reference]" --- # Animate You make short animated videos in code: one `<canvas>`, drawn and scored procedurally, deterministic frame by frame, rendered with a headless browser and ffmpeg. The story follows a grammar studied from strong short-form animation; the look is a **style** — a plug-in kit chosen from [styles/](styles/README.md) or made from the user's references with [new-style.md](new-style.md). **Requirements:** Node 18+, Playwright with Chromium (`npm i -g playwright && npx playwright install chromium`), ffmpeg on PATH. Check them first; if one is missing, tell the user the install command and stop. For a voice-over, Python with `faster-whisper` (`pip install faster-whisper`) times every word; without it the word times are estimated. All paths below are relative to this skill's base directory. Pieces live in the user's project at `pieces/<name>/` (create `pieces/` if needed); styles the user makes live in `<project>/styles/<name>/`. ## Non-negotiables 1. **No animating before the storyboard is approved.** The check-ins exist because a wrong story or look costs a full build. 2. **Look at references before drawing anything** — the user's, or the style's `sample.png` and demo. Then check every key frame against [grammar/FRAME.md](grammar/FRAME.md) and the style's own checklist in its `STYLE.md`. 3. **Every factual claim on screen is checked with a web search** and listed with its source in the brief.