text-to-lottie: The Viral Claude Lottie Animation Skill

TL;DR

text-to-lottie is an MIT-licensed harness at github.com/diffusionstudio/lottie that turns a coding agent into a motion designer. It is not a model and not an API. It is two things: a SKILL.md that teaches the agent the exact Lottie JSON dialect Skia’s Skottie renderer accepts, and a Vite + React player that hot-reloads public/lottie.json on every save so the agent can screenshot specific frames and fix its own mistakes. Install with npx skills add diffusionstudio/lottie, prompt with concrete assets (SVGs beat adjectives), and you get a Lottie file that drops into web, iOS, Android, React Native, or Flutter unchanged.

What text-to-lottie actually does

Lottie — the open JSON format for vector animation that Airbnb popularized in 2017 — has always had a production problem: making one required After Effects plus the Bodymovin exporter, or hand-editing thousands of lines of keyframe JSON. text-to-lottie’s bet is that since the format is plain JSON, an LLM can author it directly — if you give it three things it doesn’t have by default:

• The dialect. The skill’s SKILL.md is a precise spec of what Skottie (Skia’s Lottie renderer) will and won’t parse: required top-level fields, layer shapes, normalized 0–1 RGBA colors, keyframe easing handles, and the group-wrapping rule that silently blanks the canvas when violated.
• Eyes. The bundled player renders the JSON via CanvasKit (Skia compiled to WebAssembly). A Vite plugin watches public/lottie.json and reloads on save, and URL params like ?frame=60&paused=1 let the agent pin an exact frame for a screenshot instead of fumbling with a play button.
• Hands for you. Lottie’s native slots feature gets surfaced as a live properties panel — the agent declares a bgColor or ballSize slot, and you get a color picker or slider that edits the running animation without a re-parse.

The one-sentence version: it is a feedback loop, not a generator. The agent writes JSON, sees the result, and iterates — the same write-run-fix loop that makes coding agents good at code, pointed at motion design.

The viral launch

Konstantin Paulus — founder of Diffusion Studio (YC F24), the browser-based video editor company — announced the skill on June 8, 2026. The tweet passed 8,000 likes within four days (as of writing), and the repo crossed two thousand stars in its first week:

Why this one took off when a dozen “AI animation” demos haven’t: the output is a portable artifact, not a video. A Lottie JSON drops into an existing app through the runtimes teams already ship. No export step, no rasterization, no new dependency. That is a meaningfully different claim than “look what the model drew.”

How it works under the hood

The repo is a normal Vite + React + TypeScript project with one skill folder inside it. Five named pieces:

your prompt ──▶ agent (Claude Code / Codex)
                  │  reads skills/text-to-lottie/SKILL.md
                  │  (the Skottie JSON dialect + checklist)
                  ▼
            public/lottie.json   ◀── agent writes & rewrites
                  │  Vite watcher → full page reload on save
                  ▼
            player (React + CanvasKit/Skottie wasm)
                  │  ?frame=60&paused=1 → pinned-frame screenshot
                  ▼
            agent inspects frame → fixes JSON → loop
                  │
                  ▼  slots + controls.json
            properties panel (you tweak colors/sizes live)

1. SKILL.md (skills/text-to-lottie/SKILL.md) is the heart. It covers the required top-level shape (fr, ip/op, w/h), layer transforms, keyframe syntax, and what it calls “the #1 Skottie gotcha”: every shape primitive must be wrapped in a "ty": "gr" group ending with a "tr" transform, or the canvas renders blank with no error.
2. The player harness renders with Skottie via canvaskit-wasm — deliberately not the JS lottie-web runtime. The SKILL.md forbids the agent from hand-rolling a custom viewer, because the slot panel, frame-pinning URLs, and wasm wiring only hold inside the official project.
3. public/lottie.json is the entire contract. It is the only file the agent touches to change what renders; a parse failure shows an on-screen error instead of failing silently.
4. Slots + controls.json expose editable properties. A scalar slot becomes a slider, an RGBA slot a color picker, text a text input. The skill mandates at least one control on every animation: a slotted background-color layer, since the player paints no background of its own.
5. Frame-pinning (?frame=N&paused=1) is the quiet genius. An agent driving a browser tool can’t reliably drag a scrubber, but it can open a URL and screenshot data-testid="lottie-canvas". That turns “is the ball at the bottom at frame 60?” into a deterministic check.

The takeaway: most of the engineering here went into making the agent verifiable, not making it creative. That is the right priority — and it is the same pattern behind the strongest creative skills we’ve covered, like the ComfyUI workflow builder, which also ships a validation loop rather than a vibes-only generator.

Install it (verified steps)

text-to-lottie isn’t in the MCP.Directory skills catalog yet — it is days old — so there is no one-click install card. These steps are taken from the repo’s README and SKILL.md directly.

Option 1 — the skills CLI (what the README ships)

npx skills add diffusionstudio/lottie

This pulls the skill into your project’s skills directory via the community skills CLI. Then ask your agent to generate a Lottie animation using text-to-lottie.

Option 2 — manual copy into Claude Code

git clone https://github.com/diffusionstudio/lottie.git

# user-level: available in every Claude Code session
mkdir -p ~/.claude/skills
cp -r lottie/skills/text-to-lottie ~/.claude/skills/

# or project-level: checked into one repo
mkdir -p .claude/skills
cp -r lottie/skills/text-to-lottie .claude/skills/

The skill is one markdown file, so this is all the install there is. If Claude doesn’t pick it up, the usual activation gotchas apply — we wrote up the fixes.

The preview harness scaffolds itself

You do not clone the player manually. The SKILL.md instructs the agent to scaffold a fresh copy when one isn’t present, using these exact commands:

npx degit diffusionstudio/lottie my-animation
cd my-animation
npm install   # postinstall copies the CanvasKit wasm into /public
npm run dev

Open the printed local URL and you have the player. Node and npm are the only requirements; the Skia renderer arrives as a wasm binary in the postinstall step.

7 recipes with real prompts

The repo’s prompt guide has two load-bearing rules: ground the model (give it SVGs, real data, or screenshots — results are significantly better than from adjectives alone) and use motion-design vocabulary (ease-in, ease-out, camera push, anticipation). Every recipe below follows both.

1. SVG path reveal (the README’s own example)

This is the canonical first run, verbatim from the repo:

Create a Lottie animation from the SVG path in
https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg.
Reveal the path with an animation that follows the natural path
direction. Apply a premium apple themed gradient to the path.
Use ease-in-out timing, a transparent background, and preserve
the original SVG geometry.

Note what makes it work: a concrete SVG URL, a named easing curve, and an explicit constraint (“preserve the original geometry”). Swap in your own logo’s SVG export and this becomes a brand animation in one shot.

2. Loading spinner with live color controls

Use text-to-lottie. Create a 60fps, 90-frame looping loader:
three dots scaling up and down in sequence with ease-in-out,
staggered 10 frames apart. Loop seamlessly (last keyframe equals
the first). Expose slots for the dot color and the dot size, and
label them in controls.json. 512x512 composition.

Asking for slots explicitly matters — by default outputs usually expose only the mandatory background-color control. Here you get a color picker and a size slider you can hand to a designer.

3. Data-driven chart animation

Use text-to-lottie. Animate a bar chart of these monthly
signups: Jan 120, Feb 340, Mar 290, Apr 610, May 880. Bars grow
from the baseline one after another with an ease-out and a
slight overshoot. 150 frames at 60fps, then hold. Bars are
rounded rectangles; expose a slot for the bar color.

Real data is grounding. The maintainer calls out data-driven animations as a case where the skill shines, and rectangles with keyframed scale are squarely inside Skottie’s comfort zone.

4. Success checkmark for onboarding

Use text-to-lottie. A circle stroke draws itself on over 30
frames (ease-in), then a checkmark path draws inside it over 20
frames (ease-out) with a small scale bounce at the end. 512x512,
60fps, total 90 frames, no loop. Transparent-feel background:
default the bgColor slot to white.

The classic micro-interaction. The custom-path primitive ("sh" with bezier vertices) handles the checkmark; the stroke’s draw-on is plain keyframing.

5. Animate a Figma icon export

Use text-to-lottie. Here is the SVG of our bell icon exported
from Figma: [paste SVG markup]. Make a notification animation:
the bell swings like a pendulum (rotate around the top anchor,
ease-in-out, decreasing amplitude over 3 swings), and a small
badge circle pops in at the top-right with overshoot. 120 frames
at 60fps, loop-friendly.

Pasting the SVG markup inline grounds the geometry completely. Anchor placement is the thing to watch: rotation pivots around the layer’s anchor point, so “around the top” must be stated, not implied.

6. Camera-style motion graphic

Use text-to-lottie. A title-card style motion graphic: a field
of small circles drifts slowly; the camera pushes in toward the
center over 90 frames (simulate with a group scale ease-in),
then pans right for 60 frames. Think like a camera operator —
rig-like motion, nothing snaps. 1024x576, 60fps.

“Think like a camera operator” is rule three of the repo’s own prompt guide: Lottie has no camera, but group transforms simulate pushes, pans, and zooms convincingly.

7. Fix a broken Lottie you already have

Use text-to-lottie. This Lottie file renders blank in our app:
[paste JSON]. Diagnose it against the Skottie rules — check that
every shape is wrapped in a "ty":"gr" group ending with a "tr"
transform, colors are 0–1 RGBA not 0–255, and every layer's op
covers its keyframes. Fix it, write it to public/lottie.json,
and verify at ?frame=30&paused=1 before finishing.

The sleeper use case. The SKILL.md is effectively a Skottie linter in prose, and its description explicitly covers “edit or fix” requests — not only generation.

What I got wrong

Three assumptions I carried into the repo that didn’t survive reading it:

• I assumed there was a fine-tuned model somewhere. There isn’t. No weights, no API, no server. The entire “AI” is your own agent plus a markdown spec and a feedback loop. That is why it works in Codex as well as Claude Code, and why it will keep working as models improve.
• I assumed it rendered with lottie-web. It uses Skia’s Skottie via wasm, and that choice leaks into the JSON rules: the group-wrapping requirement that blanks a flat shape list is a Skottie behavior. A file that looks fine in another player can still fail here — and vice versa.
• I assumed npx skills add was an Anthropic command. It is the community skills CLI, not part of Claude Code itself. If you don’t want another npx tool, the manual copy into ~/.claude/skills above is equivalent — the skill is a single file.

Limitations

There is also an honest format-level critique worth airing. In a 2025 Hacker News thread on Lottie, user panstromek argued the format “is probably one of the worst choices they could do for a use case like this — it’s JSON, for something that is usually a bunch of numbers,” and that browsers struggle to play many simultaneously. Fair on bytes-per-frame — but the verbosity that offends a format purist is exactly what makes Lottie LLM-authorable. A compact binary format would be smaller and completely opaque to this workflow. Pick your trade-off.

The Lottie ecosystem context

Quick orientation if Lottie is new to you. Airbnb open-sourced the original Lottie libraries in 2017 to play After Effects animations natively on iOS and Android; the JSON itself comes from the Bodymovin exporter. LottieFiles grew into the format’s marketplace and tooling hub, and the format is now being standardized openly. Runtimes exist for effectively every platform — the repo’s README includes copy-paste snippets for vanilla HTML, React Native (both lottie-react-native and React Native Skia’s Skottie module), Swift, Kotlin, and Flutter.

Two adjacent pieces complete the picture. First, LottieFiles themselves ship a motion-design skill covering timing, easing, and choreography principles for AI agents — and text-to-lottie’s SKILL.md explicitly recommends pairing with it: text-to-lottie handles the mechanics (the JSON shape Skottie needs), the LottieFiles skill handles the craft. Second, this slots into a fast-growing cluster of creative agent skills — if generating vector motion appeals to you, the Nano Banana Pro image-generation skill and the ComfyUI workflow builder are the raster-side siblings. Browse the rest of the skills catalog for the long tail.

The Verdict

Frequently asked questions

Glossary

• Lottie — open JSON format for vector animations, playable natively on web and mobile.
• Bodymovin — the After Effects plugin that exports compositions to Lottie JSON; also the format’s original name.
• Skottie — Skia’s native Lottie renderer; what the bundled player uses.
• CanvasKit — Skia compiled to WebAssembly, so Skottie runs in a browser.
• Agent skill — a SKILL.md instruction file a coding agent loads on demand to gain a capability.
• Harness — the surrounding project (player, watcher, controls) that lets the agent verify its output.
• Slot — Lottie’s native mechanism for runtime-editable properties, referenced by sid.
• Keyframe — a timed value (t frame, s value) the renderer interpolates between.
• Easing — the bezier curve (i/o handles) shaping how a value accelerates between keyframes.
• Shape layer — layer type 4: vector geometry defined inline, no external assets.
• In/out point — ip/op, the frame range a composition or layer is live; duration = (op − ip) / fr.
• degit — a scaffolding tool that copies a repo snapshot without its git history.

Sources

Primary

• diffusionstudio/lottie — the repo, README, and prompt guide (MIT)
• skills/text-to-lottie/SKILL.md — the full Skottie dialect spec and checklist
• @konstipaulus launch tweet, June 8, 2026 (verified via oEmbed/syndication)
• Diffusion Studio on Y Combinator (founder context)

Community & contrarian

• Hacker News: “Lottie is an open format for animated vector graphics” (format critique)
• Digg AI: coverage of the launch and community reaction

Documentation

• Airbnb Lottie docs (format origins)
• LottieFiles: What is Lottie?
• LottieFiles motion-design-skill (the recommended craft pairing)

Internal

• /blog/what-are-claude-code-skills
• /blog/claude-nano-banana-pro-skill-guide
• /blog/claude-comfyui-workflow-builder-skill-guide
• /blog/why-your-claude-skill-isnt-activating-2026-fixes
• /skills (browse 8,000+ skills)