Text-to-Lottie: Let Agents Ship UI Motion That Renders Locally

Where this fits

You're building an agent that prototypes a loader animation for a dashboard, or fix a microinteraction that breaks in your desktop app. Instead of hand-coding SVG or tangling with After Effects, you need a reliable way to produce and validate Lottie JSON locally. The text-to-lottie skill that agents can call to create, edit, or repair Lottie/Bodymovin animations for the Skia Skottie player — no cloud renderer, no proprietary export path.

Why agents benefit

• Verify in the real player: The skill mandates using the official Skia Skottie player for validation, so the agent knows the output actually renders — not just that the JSON parses.
• Deliver complete scenes, not fragments: The output is a renderable scene with slots and controls, not a single animation chunk. The agent reasons about composition, timing, and easing.
• Strong defaults, fewer questions: The skill pushes decisions only when they change the result (background transparency, brand constraints, format, asset sources). Agents move fast without pointless clarifying loops.
• Fix by intent: Instead of rewriting JSON from scratch, the agent can describe a broken animation and get a repaired, working Lottie file.
• Portable across clients: No host-specific commands — the same skill works in Claude, VS Code, or any Agent Skills client, making your agent's capability reusable.

Practical scenarios

Animated logo for a product teaser

A user says, “Animate our feather logo bouncing with a soft shadow for a promo.” The agent parses the SVG, generates a Lottie scene with a spring easing, sets a transparent background, and renders it in Skottie to confirm the motion feels professional.

Fix a broken lower-third in a video pipeline

An existing Lottie file has a misplaced mask that clips text. The agent opens the JSON, identifies the mask's parent index and blend mode, corrects it, and runs a Skottie check to ensure the lower third appears cleanly over both light and dark backgrounds.

Data-driven chart transition for a stat widget

You need a bar chart that animates from zero to target values. The agent builds the Lottie with precomposed layers for each bar, adds easing curves, and validates that the update works with the slot API — ready to bind to live data.

Add it to your agent workflow

Install the skill with a single command:

npx skills add diffusionstudio/lottie --skill text-to-lottie

Then prompt your agent with a concrete requirement, for example: “Create a 2-second loading spinner for a dark theme using three overlapping circles, with a soft glow, and verify it in Skottie.” The skill will generate the Lottie JSON and return the path to a valid scene.

Compare before adopting

Don't assume every Lottie skill is equal. Look for quality signals like whether the skill pins a specific Skottie version, how it handles assets (base64 inline vs external URLs), and whether it actually runs the player during verification. Check maintenance freshness — recent commits and responsive issue threads matter. Compare against alternatives like raw Bodymovin export or SVG-to-Lottie converters, and ask if the skill fits your agent's native tool set (does it rely on Node, Python, or shell commands your runtime supports?).

Why it is worth tracking

This skill stands out because it forces local verification with Skia Skottie, eliminating the guesswork of producing JSON that “should” work. With 5,272 stars and active maintenance from diffusionstudio, it's a mature, community-vetted approach. Track it if your agents need to ship animations for desktop or embedded UI — and re-evaluate whenever the skill’s version bumps to keep your motion output stable. Explore the full catalog and this skill's context on OpenAgentSkill to see how it fits your stack.