Pack · #78 trending skills repo · ↗ +361 stars this week
Claude Animation Skills
artemnovitckii/claude-animation-skills
Six Claude Code skills that make animations for reels, no footage needed: 3D cartoon explainer, stick figure, minimal line art, 3D map route, exploded view, line graph.
- Stars
- 477
- This week
- +361
- Forks
- 59
- Open issues
- 1
- Skills inside
- 6
Get started
Install the skills
npx skills add artemnovitckii/claude-animation-skillsInstalls into Claude Code, Codex, Cursor, OpenCode and the other agents it finds on your machine.
/plugin marketplace add artemnovitckii/claude-animation-skills
/plugin install animation-skills@claude-animation-skillsRun inside Claude Code, then pick what to install from /plugin.
git clone --depth 1 https://github.com/artemnovitckii/claude-animation-skills.git /tmp/claude-animation-skills
cp -r /tmp/claude-animation-skills ~/.claude/skills/claude-animation-skillsClaude Code reads ~/.claude/skills/ (or .claude/skills/ in a project). Other agents read the same SKILL.md format from their own skills folder.
Inside this repo
6 skills
skills/breakdowngraphMakes a minimal line-graph animation for a reel. A smooth black line draws itself on white (or white on black) while one big number counts up with the tip, then lands on the final value. Use when the user runs /graph or asks for a growth chart, a "0 to 100K" number animation or an animated stat.skills/graphmap-routeMakes a 3D map animation for a reel. A clean white city with parks and a river, a coloured route that draws itself from start to destination while the camera follows, a red pin that drops with a bounce, an ETA card that counts down and a destination card. Use when the user runs /map-route or asks foskills/map-routeminimalistic-graphicsMakes a minimal black-and-white line-art animation for a reel. Thin outlined steps rise one by one, a white dot hops up them, and at the top an orbit draws around it and a short second line swaps in. One quiet lowercase line of text on top. Use when the user runs /minimalistic-graphics or asks for sskills/minimalistic-graphicsstick-figureMakes a code-animated stick-figure explainer reel (9:16, 30 to 45 s) from a question or topic. A bright cartoon world with thick outlines, stick people with big white heads and faces, constant camera motion, whip transitions, 1 to 2 word captions, a playful underscore and cartoon sound effects, all skills/stick-figurezach-d-filmsMakes a 3D cartoon "what if" explainer short (9:16) in the style of Zack D. Films-type videos, entirely in code with three.js. Procedural cartoon people, props and effects, a blue studio sky, slow-motion impacts, a red force-ripple overlay, quick whip cuts and 1 to 3 word captions timed to the voiceskills/zach-d-filmsDocumentation
README
Claude animation skills
Skills for Claude Code that make animations for reels, with no footage needed. You type /map-route home to the gym, 2.8 km and Claude writes the spec, renders the animation on your own computer and checks it against Instagram's safe area.
| Skill | What it makes | Try it with |
|---|---|---|
/zach-d-films |
A 3D cartoon "what if" explainer. Cartoon people, props and effects built in three.js, slow-motion impacts, a red force ripple and captions timed to your voiceover. Comes with a finished 29 s example to build from. | Could ancient armour stop an arrow? |
/stick-figure |
A stick-figure explainer reel. A bright cartoon world, stick people with big faces, whip transitions, 1 to 2 word captions, and music and sound effects made in code. Comes with a finished 37 s example. | Why did pirates wear eye patches? |
/minimalistic-graphics |
Black-and-white line art. Hairline steps rise, one white dot hops up them and gets an orbit at the top, with one quiet line of text. | Every step feels small until you look back |
/map-route |
A 3D map route. A white city, a route that draws itself while the camera follows, a pin drop, an ETA that counts down and a destination card. | Home to the gym, 2.8 km |
/breakdown |
A 3D exploded view. A phone comes apart layer by layer, and every part gets a leader line and a label. | My phone, every part labelled |
/graph |
A minimal line graph. A smooth line draws itself, and one big number counts up with its tip. Black on white, or white on black. | 0 to 100K followers in 9 months |
See them moving: novitckii.com/resources/animation-skills
Install
You need macOS or Linux with ffmpeg, Node.js 18+ and Python 3.9+.
brew install ffmpeg node # if you don't have them
git clone https://github.com/artemnovitckii/claude-animation-skills.git ~/claude-animation-skills
cd ~/claude-animation-skills && ./install.sh
install.sh links every skill into ~/.claude/skills/ (so they show up as /graph, /map-route and so on) and runs the one-time setup. The setup installs three.js and Playwright into kit/node_modules, fetches GSAP and warms up HyperFrames.
/stick-figure and /zach-d-films also need a free voice and word timings. They run on your computer, with no API key, and need about 1 GB of models, downloaded once:
./install.sh --voice
To update later, run git pull && ./install.sh.
It's also packaged as a Claude Code plugin. Run these inside Claude Code:
/plugin marketplace add artemnovitckii/claude-animation-skills
/plugin install animation-skills@claude-animation-skills
Plugin skills are namespaced (/animation-skills:graph). The git clone above is the route tested end to end.
Use
Open Claude Code anywhere and ask:
/graph 0 to 100K followers in 9 months: 1.2K, 2.1K, 3.4K, 5K, 9K, 24K, 51K, 78K, 100K
/map-route home to the gym, 2.8 km, 9 minutes
/minimalistic-graphics every step feels small until you look back
/breakdown my phone, label it like a joke
/stick-figure why did pirates wear eye patches?
/zach-d-films could ancient armour stop an arrow? (my voiceover is ~/Downloads/vo.m4a)
The four quick ones (/graph, /minimalistic-graphics, /map-route, /breakdown) work from a small JSON spec. Claude writes name.graph.json, runs the skill's build.py, and you get name.graph.mp4 (1080x1920, 30 fps) plus name.graph.sheet.jpg, a contact sheet with Instagram's safe area marked. The 2D ones render in about 10 seconds, the 3D ones in about 1.5 minutes.
The two engines (/stick-figure, /zach-d-films) are full explainer reels. Claude copies the example project, writes the script with you, makes or takes the voiceover, times every caption to it, writes the shots in code, checks stills, and renders. Plan on a working session, not one command.
How it's built
skills/<name>/SKILL.md what Claude follows: steps, the spec, taste rules
skills/<name>/build.py spec.json -> template.html -> HyperFrames -> mp4 (graph, minimalistic-graphics, map-route, breakdown)
skills/<name>/template.html the animation (GSAP, or three.js for the 3D ones)
skills/stick-figure/engine/ canvas engine, voice + timing tools, make.sh, and the pirate reel as the template
skills/zach-d-films/engine/ three.js engine (people, props, effects, renderer) and the armour short as the example
kit/anim.py shared: fill a template, render, snapshots, contact sheet
kit/words.py word timings for a voiceover (Parakeet, on your computer)
kit/setup.sh one-time setup
To add a quick skill, copy a folder like skills/graph, change template.html (read the spec from const SPEC = __SPEC__) and its DEFAULTS in build.py, then run ./install.sh again.
Credits
- HyperFrames by HeyGen renders the quick skills.
- three.js draws the 3D, GSAP drives the 2D animation and Playwright runs the engines' headless Chrome. They are installed at setup, not included here.
- The free voice is Kokoro and the word timings come from NVIDIA's Parakeet through sherpa-onnx. The models are downloaded at setup, not included here.
- The fonts are Inter, Inter Tight, Poppins, JetBrains Mono, Montserrat and Lora, all under the SIL Open Font License.
/zach-d-filmsis named after the style of short it makes. It isn't affiliated with Zack D. Films.
Made by Artem Novitckii. MIT licensed.