claude-animation-skills README

The project's README from github.com/artemnovitckii/claude-animation-skills. As one markdown file: README.md.

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.

The six skills, one frame each

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

Made by Artem Novitckii. MIT licensed.

claude-animation-skills (artemnovitckii/claude-animation-skills)

Searching Database…

378 ·GitHub
Claude-animation-skills
What is this?A set of six Claude Code skills that generate short animations for Instagram reels without any footage: a 3D cartoon explainer, a stick figure reel, minimal line art, a 3D map route, an exploded view and a line graph. You call each one as a slash command inside Claude Code.
Is it a plugin or a set of scripts I copy around?Mostly a set of scripts: install.sh links every skill into ~/.claude/skills/ so they appear as slash commands. It's also packaged as a Claude Code plugin, but the git clone route is the one the author tested end to end.
How do I get it running?Clone the repository and run ./install.sh from it. The script links the skills, installs three.js and Playwright, fetches GSAP and warms up HyperFrames. To update later, run git pull and ./install.sh again.
What do I need installed first?macOS or Linux, ffmpeg, Node.js 18+ and Python 3.9+. No API key is needed: the free voice runs on your computer, but the two engine skills download about 1 GB of models once.
Is it a one-command tool or more of a project?It depends on the skill. The quick ones work from a small JSON spec, while /stick-figure and /zach-d-films are full explainer reels: Claude writes the script with you, makes or takes the voiceover, times captions and writes the shots in code. Expect a working session, not a single command.
Does it work on Windows?Not as documented: the README only lists macOS and Linux as supported systems.
Can I add my own quick animation style?Yes: copy a folder like skills/graph, change template.html and the DEFAULTS in build.py, then run ./install.sh again to link the new skill.
What does the contact sheet show?Each render also gets a contact sheet image (name.graph.sheet.jpg) with Instagram's safe area marked, so you can check framing before you post.
Why is /zach-d-films named that way?It's named after the style of short it makes, a 3D cartoon 'what if' explainer. The author states it isn't affiliated with Zack D. Films.
What does /breakdown make?A 3D exploded view: a phone comes apart layer by layer, and every part gets a leader line and a label.
What are similar projects?herk-edit-kit, guizang-product-video-skill, saas-motion-kit, reanimate, threejs-architecture-effects, brag, html-anything, awesome-claude-video-skills
Which topics is it in?hyperframes, threejs, claude-skills, animation, claude-code, javascript
Creator
artemnovitckii
Size
2 MB
Stars
378
Updated
CommitNov 01
Age
3d
Commits · 90 Days