# Text-To-Lottie Open-source agent skill and preview harness for generating production-ready Lottie animations with Codex or Claude Code. ## Agent Decision Summary - Risk level: moderate - Source confidence: high - Recommended workflows: Coding agent workflow, Connector or protocol layer, Reusable skill workflow - Permission surface: shell/files - Agent JSON: https://www.openagent.bot/skills/lottie.agent.json ## Summary Text-To-Lottie is an open-source skill and harness from Diffusion Studio for generating Lottie animations with AI coding agents. The project includes a Skia CanvasKit / Skottie player, React + TypeScript controls, and a workflow where the agent writes `public/lottie.json` while the dev server hot-reloads the animation. ## Guide Text-To-Lottie is an open-source agent skill and local preview harness for generating production-ready Lottie animations. ### What it is It packages a `text-to-lottie` skill with a React + TypeScript preview app that renders the generated `public/lottie.json` through Skia CanvasKit / Skottie. ### Why it matters Agent skills are becoming a practical way to turn expert creative workflows into repeatable files. Text-To-Lottie applies that pattern to motion design, where live visual feedback is essential. ### How it works Install the skill, ask a compatible agent to generate a Lottie animation with `text-to-lottie`, and use the local harness to preview and iterate on the resulting JSON. ## Use Cases - Interface animation: Create lightweight Lottie animations for empty states, loading moments, feature callouts, and onboarding flows. - Creative agent workflows: Use a skill-aware coding agent to generate structured animation assets with a repeatable preview loop. - Rapid motion prototyping: Prototype Lottie ideas before deciding whether they need hand refinement in a specialist animation tool. ## Alternatives - Use a manual editor for exact timeline control vs Lottie editor workflows: Text-To-Lottie is strongest for AI-assisted generation and iteration. Manual tools remain better for fine-grained timeline polish. ### Getting Started - Open the GitHub repository: https://github.com/diffusionstudio/lottie ### FAQ - Is Text-To-Lottie open source? - Yes. The GitHub repository is listed under the MIT license. - What does the skill generate? - The workflow is designed around generating Lottie JSON, especially `public/lottie.json`, and previewing it live in the included local harness. - Who should evaluate Text-To-Lottie? - Teams using Codex, Claude Code, or similar coding agents to produce product motion assets should evaluate it. ## What It Does It packages a `text-to-lottie` skill with a React + TypeScript preview app that renders the generated `public/lottie.json` through Skia CanvasKit / Skottie. ## How To Evaluate Install the skill, ask a compatible agent to generate a Lottie animation with `text-to-lottie`, and use the local harness to preview and iterate on the resulting JSON. ## Why It Matters Lottie generation is a good example of agent skills moving beyond text output into production creative assets. Text-To-Lottie gives agents a tight loop: generate structured animation JSON, preview it live, and iterate toward something shippable. ## Best For - Design and product teams generating lightweight motion assets - Developers using Codex, Claude Code, or other skill-aware coding agents - Teams experimenting with agent-generated Lottie animations and live preview workflows ## Not For - Users looking for a traditional timeline animation editor - Teams that need After Effects plugin workflows rather than agent-authored JSON - Projects that cannot run a local development preview harness ## What It Actually Does - Agent-ready skill install: The project can be added with `npx skills add diffusionstudio/lottie` and used through the `text-to-lottie` skill. - Why it matters: A skill install path makes it easier for Codex, Claude Code, and similar agents to reuse the workflow without manual prompt setup. - Live Lottie preview loop: The harness watches `public/lottie.json` and hot-reloads the generated animation in a local player. - Why it matters: Motion assets need visual feedback. A live loop lets the agent and human reviewer iterate quickly. - Skottie-based rendering: The preview player uses Skia CanvasKit / Skottie to render Lottie animations in the browser. - Why it matters: Using a real Lottie renderer helps catch animation JSON issues before assets move into product. ## Typical Use Cases - Product motion assets: Generate lightweight onboarding, empty-state, loading, or feature-highlight animations for web and app interfaces. - Agent creative production: Give a coding agent a repeatable workflow for creating structured Lottie JSON rather than static prompts. - Animation prototyping: Use the local preview harness to rapidly test and refine Lottie concepts before handing them to design or engineering. ## How It Compares - Choose Text-To-Lottie for agent-authored motion vs Manual Lottie editing: Manual editors are better for precise timeline work. Text-To-Lottie is better when a coding agent should generate and revise animation JSON inside a local preview loop. ## Fit Matrix - Coding agent workflow: strong. Text-To-Lottie has multiple signals for coding agent workflow, including matching tags, capabilities, category, or positioning. Required check: Run a small repository change and inspect the diff, tests, and rollback path. - Connector or protocol layer: strong. Text-To-Lottie has multiple signals for connector or protocol layer, including matching tags, capabilities, category, or positioning. Required check: Connect one low-risk service, then inspect schemas, auth scope, errors, and logs. - Reusable skill workflow: strong. Text-To-Lottie has multiple signals for reusable skill workflow, including matching tags, capabilities, category, or positioning. Required check: Run one skill end to end and check whether it produces evidence or structured output. - Browser automation: partial. Text-To-Lottie has at least one signal for browser automation, but should be checked against a real task before adoption. Required check: Run one non-sensitive website task and inspect clicks, waits, retries, and changed URLs. - Local or private AI stack: partial. Text-To-Lottie has at least one signal for local or private ai stack, but should be checked against a real task before adoption. Required check: Verify hardware requirements, data path, storage, and whether all calls stay in your environment. - Evaluation and observability: weak. Text-To-Lottie is not primarily positioned for evaluation and observability in the current metadata. Required check: Add one repeatable test case and confirm results can run again in review or CI. ## Evidence - verified: Text-To-Lottie is listed as open source. Source: License metadata: MIT - verified: Text-To-Lottie has a recorded GitHub repository: diffusionstudio/lottie. Source: Resource facts and GitHub source link. - inferred: Text-To-Lottie is tagged with agent skill, workflow, automation capabilities. Source: OpenAgent capability taxonomy. ## Missing Checks - Dedicated docs link is missing. - Repository freshness has not been recorded. ## Next Actions - Inspect repository: https://github.com/diffusionstudio/lottie - Open Source: https://x.com/konstipaulus/status/2064011863889788972?s=46 - Install the skill: npx skills add diffusionstudio/lottie - Run the local harness manually: npm install && npm run dev ## Command Line ### Install the skill Add the Text-To-Lottie skill to a compatible agent environment. ```bash npx skills add diffusionstudio/lottie ``` ### Run the local harness manually Install dependencies and start the local Lottie preview app. ```bash npm install && npm run dev ``` ## Facts - Category: skills - Resource type: skill - Open source: yes - License: MIT - Last verified: 2026-06-09 - GitHub repo: diffusionstudio/lottie - GitHub stars: 844 ## Capabilities - agent-skill - workflow - automation ## Structured Use Case Tags - developer-workflow ## Getting Started - Open the GitHub repository: https://github.com/diffusionstudio/lottie - Read the launch post: https://x.com/konstipaulus/status/2064011863889788972?s=46 ## Links - GitHub: https://github.com/diffusionstudio/lottie - Source: https://x.com/konstipaulus/status/2064011863889788972?s=46 ## Structured Outputs - JSON: https://www.openagent.bot/skills/lottie.json - Markdown: https://www.openagent.bot/skills/lottie.md - Agent JSON: https://www.openagent.bot/skills/lottie.agent.json - Canonical: https://www.openagent.bot/skills/lottie