Every card here is live on Chan Meng's GitHub profile, made with the method and kit this skill ships. Each one is a single SVG file playing in your browser right now.
Why not a GIF
It looks like your product because it is built from it
A recording shows what your product looked like on one day. A card is rebuilt from your source.
| A card | A screen recording | |
|---|---|---|
| Text | Vector outlines, sharp at any width | Pixels, soft at README size |
| Length | A 30-second card is 313 KB | Long clips grow quickly |
| Your brand | Your tokens, your fonts, your wordmark | Whatever was on screen |
| After a release | The build fails when the product stops matching | Goes stale without telling you |
| Reduced motion | Rests on a complete still frame | Keeps playing |
What happens when you ask
You describe nothing. It reads your repo.
Reads your product
Colour tokens, fonts, the real logo file, brand rules and the copy you have already approved.
Picks the story
What does your product do that can be shown happening? That becomes the stage.
Builds from the source
Compiled, quoted or redrawn from the real thing. Nothing on the stage is imagined.
Proves it plays
A gate for GitHub's image sandbox, then every scene captured on light and dark.
Install
Make yours in one sentence
Free and open source under the MIT license. In Claude Code:
/plugin marketplace add ChanMeng666/chanmeng-svg-animation-studio/plugin install chanmeng-svg-animation-studio@chanmeng-svg-animation-studioThen ask for it in your project
Make an animated README card for this repo.Another coding agent? Point it at SKILL.md. The kit is plain Node, and it is copied into your repo so the card rebuilds without the skill.
Also in the studio
Mascots, logos and loaders
The repo also holds a library of 44 animation primitives and four skills for characters, marks and banners. They run inside a clone of the repo. Read the overview.
