LLMs finally learned to draw — in JSON
A dev harness that lets Claude or Codex generate Lottie animations and watch them play live.

What it does
This is a local dev harness, not a library. It wraps Skia’s CanvasKit (Skottie) renderer in a full-screen player with a React + shadcn/ui control surface. The trick: an LLM agent writes to public/lottie.json, and the dev server hot-reloads the animation in real time. You prompt, it generates vector motion graphics, you watch.
The interesting bit
The “skill” packaging is the real product. Install via npx skills add diffusionstudio/lottie, then tell Claude Code or Codex to use text-to-lottie. The repo itself is mostly plumbing — CanvasKit WASM copying, a Vite dev server, a JSON file contract — but that plumbing turns an LLM from a text generator into an animation assistant.
Key highlights
- Hot-reload loop: agent writes JSON, browser updates without restart
- Skia/CanvasKit (Skottie) for accurate, production-grade Lottie rendering
- One-command install as a “skill” for Claude Code, Codex, or compatible agents
- React + shadcn/ui control surface for playback UI
- TypeScript throughout
Caveats
- CanvasKit WASM (~2.5MB) is fetched from npm and copied on postinstall; not bundled, not committed
- Requires a compatible agent that understands the “skills” protocol
- The README doesn’t specify which Lottie features are supported or how complex the prompts can get
Verdict
Worth a spin if you’re already using Claude Code or Codex and need simple animated UI elements without touching After Effects. Skip it if you want a standalone tool — this is an agent accessory, not a self-contained generator.