Text-to-Lottie

Open-source skill + harness for generating production-ready Lottie JSON via Claude Code, Codex, or any skills-capable coding agent — with an included player for inspect/edit loops.

By Diffusion Studio (Y Combinator). Viral launch tweet: 14.4K bookmarks, 8.7K likes (Jun 2026). Source: X/@konstipaulus, 2026-06-08

What it is

Text-to-Lottie is not a single API call — it is an agent harness packaged as a skills.sh skill. The agent sets up a workspace, generates Lottie JSON algorithmically from prompts (often grounded in SVGs, data, or screenshots), and exposes an included player for iteration. Kevin's executable owner is skills/engineering/lottie-animations/SKILL.md, which now routes text/SVG-to-Lottie generation before playback integration. Source: GitHub diffusionstudio/lottie, https://github.com/diffusionstudio/lottie, 2026-06-12

Install:

npx skills add diffusionstudio/lottie

Then ask the agent to generate a Lottie using text-to-lottie. Output is standard Lottie JSON — usable with lottie-web, React wrappers, or After Effects import. Source: GitHub diffusionstudio/lottie, 2026-06-12

Version Snapshot

Checked 2026-06-30 against https://github.com/diffusionstudio/lottie.git:

• Latest exposed Git tag: v1.0.0
• Default branch HEAD: c3264ff369d032037b146aaa4f73a5fe94e5e565
• Install route remains npx skills add diffusionstudio/lottie

Use the tag or source commit when reproducing behavior. If the skill is installed through skills.sh, inspect the resolved skill body before treating a social thread as current implementation truth. Source: git ls-remote, 2026-06-30

When to use vs Remotion

From the author's thread: Source: X/@konstipaulus thread, 2026-06-08

Prompt guide (author)

1. Ground the model — provide SVGs, real data, or screenshots; concrete assets beat prose-only prompts.
2. Motion design language — ease-in, ease-out, ease-in-out; avoid vague "smoothly animate."
3. Camera operator — pans, pushes, zooms via group transforms.
4. Request controls — default exposes background color; ask for Skottie slots / editable properties explicitly.
5. FPS + duration — e.g. "150 frames, 30 FPS" for timing-critical work.

Example prompts from launch thread include: TSLA-style candlestick chart reveal (350 candles, parent camera group), Spotify logo trim-path + sequential wordmark rise, SVG path reveal with premium gradient. Source: X/@konstipaulus thread, 2026-06-08

Stack fit

• Pairs with Frontend and Design Skills for runtime playback patterns.
• Same skill-as-harness shape as Media Generation Skills (generate asset) and shadcn /improve (agent workflow codified as skill).
• For in-app micro-interactions after export, wire JSON into @web-kits/audio-adjacent motion stacks or lottie-react.

2026 Skill Upgrade

The June 2026 skill update improves the design-taste layer: cleaner typography, spacing, and layout; chapterized multi-sequence animations; stronger transitions and easings; icon-animation improvements; and better parallel refinement behavior. Treat it as a motion-design harness, not only a JSON generator. Source: X/@dorukkavcioglu, 2026-06-27

Demo

Launch video attached to bookmark. Source: X/@konstipaulus, 2026-06-08

---

Timeline

• 2026-06-29 | Added the June 2026 skill upgrade: stronger typography/spacing/layout taste, chapterized sequences, transitions/easing, icon animation, and parallel refinement. Source: X/@dorukkavcioglu, 2026-06-27
• 2026-06-30 | Refreshed source snapshot: tag remains v1.0.0, default branch HEAD is now c3264ff369d032037b146aaa4f73a5fe94e5e565. Source: git ls-remote, 2026-06-30
• 2026-06-29 | Recorded release snapshot: Git tag v1.0.0 and default branch HEAD 39bb536f27225a198ed4c1ec92de0a4ab8665a9c. Source: git ls-remote, 2026-06-29
• 2026-06-08 | @konstipaulus launch: open-source skill + harness, npx skills add diffusionstudio/lottie, prompt guide + Remotion boundary in thread. 14,404 bookmarks. Source: X/@konstipaulus, 2026-06-08
• 2026-06-12 | Wiki page created from bookmark absorption pass (enriched thread + GitHub README). Source: User, 2026-06-12