← all repositories
diffusionstudio/lottie

LLMs finally learned to draw — in JSON

A dev harness that lets Claude or Codex generate Lottie animations and watch them play live.

lottie
Velocity · 7d
+295
★ / day
Trend
steady
collecting data…
star history

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.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.