# illustration-animator

> Claude/Codex skill by [@icons8](https://omgskills.com/library/icons8/index.md) · 11 stars · Updated 2026-10-22

Bring static vector illustrations to life - turn a folder of SVG illustrations of one style into looped animations (Lottie JSON and MP4 without background). For each illustration it invents a short story, cuts the drawing into moving parts with joints and masks, builds the animation, checks it with scripts and a visual judge, and fixes it. Use when the user asks to animate SVG illustrations, make Lottie from SVG, or fix such an animation ("\<scene\> - bad"). For UI transitions and easing use motion.

Tags: agent, agent-skills, codex, icon-set, icons, mcp, skills

## Install

```sh
git clone https://github.com/icons8/agent-skills /tmp/agent-skills && ln -s /tmp/agent-skills/skills/illustration-animator ~/.claude/skills/illustration-animator
```

## From README

Illustration animator Talk to the user in their language. The motion rules, style rules and reference scenes in this skill were trained on Icons8 animations and illustrations (icons8.com). Paths ${CLAUDESKILLDIR} is the folder that holds this SKILL.md. Clients that do not fill the variable in: replace it with that folder's absolute path, here and in every document of the skill. Every engine command names the script by that path, node "${CLAUDESKILLDIR}/engine/bin/ .js" …, so it works from any working folder; give it the user's style folder as an absolute path. A subagent gets the absolute path of this folder in its prompt, in place of ${CLAUDESKILLDIR}. The step documents are in references/; the paths they cite (styles/…, scene-format.md, judge.md) are relative to references/. Needs Node.js 22.12 or newer.

## Links

- HTML page: https://omgskills.com/library/icons8/agent-skills/skills/illustration-animator/
- GitHub: https://github.com/icons8/agent-skills
- Author: [@icons8](https://omgskills.com/library/icons8/index.md)

## More from this repo

- [asset-check](https://omgskills.com/library/icons8/agent-skills/skills/asset-check/index.md) — Four mechanical asset checks on an interface that was just built or changed - emoji standing in for icons, sections...
   - [@icons8](https://omgskills.com/library/icons8/index.md) · 11 stars
- [design-tokens](https://omgskills.com/library/icons8/agent-skills/skills/design-tokens/index.md) — Set up design tokens in a project that has none, and catch drift in one that does - color palette with a neutral ramp,...
   - [@icons8](https://omgskills.com/library/icons8/index.md) · 11 stars
- [icons8](https://omgskills.com/library/icons8/agent-skills/skills/icons8/index.md) — Pick and fetch icons through the Icons8 MCP so a project ends up with one consistent set instead of a pile of...
   - [@icons8](https://omgskills.com/library/icons8/index.md) · 11 stars