Skills

Text-To-Lottie

Open-source agent skill and preview harness for generating production-ready Lottie animations with Codex or Claude Code.

0.8K Stars
0.1K Forks
MIT License
diffusionstudio Maintainer
2026-06-09 Verified
Overview

What is Text-To-Lottie?

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.

Agent-ready skill install

The project can be added with `npx skills add diffusionstudio/lottie` and used through the `text-to-lottie` skill.

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.

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.

Using a real Lottie renderer helps catch animation JSON issues before assets move into product.
Use cases

What Text-To-Lottie is built for

01

Product motion assets

Generate lightweight onboarding, empty-state, loading, or feature-highlight animations for web and app interfaces.

02

Agent creative production

Give a coding agent a repeatable workflow for creating structured Lottie JSON rather than static prompts.

03

Animation prototyping

Use the local preview harness to rapidly test and refine Lottie concepts before handing them to design or engineering.

Quick start

Get started in seconds

terminal
$ npx skills add diffusionstudio/lottie
$ npm install && npm run dev
Comparison

How it stacks up

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.

FAQ

Frequently asked questions

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.

Decision brief

Should you use Text-To-Lottie?

JSON
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
Trust and freshness
  • Verified 2026-06-09
  • License: MIT
  • Repo: diffusionstudio/lottie
  • Open-source signal
Deployment

Check source

Permission surface

shell/files

Decision signals

No extra signals recorded

Agent packet

Structured decision data for Text-To-Lottie

This packet is the compact machine-readable view agents should use before following source links or taking action.

Capabilities

agent skill, workflow, automation

Constraints

open source

Deployment

Check source

Permission surface

shell/files

Recommended workflows

Coding agent workflow, Connector or protocol layer, Reusable skill workflow

Overview

What Text-To-Lottie does

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 to evaluate it

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.

Facts

Known metadata and operating surface

These fields are separated from editorial interpretation so agents can reason over facts and missing checks.

Resource type skill
Category Skills
Maturity active
Difficulty Unknown
License MIT
Pricing open source
Verified 2026-06-09
Source confidence high
Risk level moderate
Fit matrix

Where Text-To-Lottie fits in an agent stack

strong

Coding agent workflow

Text-To-Lottie has multiple signals for coding agent workflow, including matching tags, capabilities, category, or positioning.

  • Run a small repository change and inspect the diff, tests, and rollback path.
  • Confirm official docs, current maintenance, license, and runtime constraints before production use.
strong

Connector or protocol layer

Text-To-Lottie has multiple signals for connector or protocol layer, including matching tags, capabilities, category, or positioning.

  • Connect one low-risk service, then inspect schemas, auth scope, errors, and logs.
  • Confirm official docs, current maintenance, license, and runtime constraints before production use.
strong

Reusable skill workflow

Text-To-Lottie has multiple signals for reusable skill workflow, including matching tags, capabilities, category, or positioning.

  • Run one skill end to end and check whether it produces evidence or structured output.
  • Confirm official docs, current maintenance, license, and runtime constraints before production use.
partial

Browser automation

Text-To-Lottie has at least one signal for browser automation, but should be checked against a real task before adoption.

  • Run one non-sensitive website task and inspect clicks, waits, retries, and changed URLs.
  • Confirm official docs, current maintenance, license, and runtime constraints before production use.
partial

Local or private AI stack

Text-To-Lottie has at least one signal for local or private ai stack, but should be checked against a real task before adoption.

  • Verify hardware requirements, data path, storage, and whether all calls stay in your environment.
  • Confirm official docs, current maintenance, license, and runtime constraints before production use.
weak

Evaluation and observability

Text-To-Lottie is not primarily positioned for evaluation and observability in the current metadata.

  • Add one repeatable test case and confirm results can run again in review or CI.
  • Confirm official docs, current maintenance, license, and runtime constraints before production use.
Inputs and outputs

What an agent should inspect

Likely inputs

  • Repositories, files, issues, terminal output, and test results
  • Official setup instructions and a small real workflow

Likely outputs

  • Diffs, commits, explanations, test results, or review notes
  • A decision on whether this resource fits the target workflow
Evidence

Sources, claims, and missing checks

Claims are marked separately from source links so future crawlers and reviewers can update them without rewriting the page.

verified

Text-To-Lottie is listed as open source.

License metadata: MIT
verified

Text-To-Lottie has a recorded GitHub repository: diffusionstudio/lottie.

Resource facts and GitHub source link.
inferred

Text-To-Lottie is tagged with agent skill, workflow, automation capabilities.

OpenAgent capability taxonomy.
Missing checks
  • Dedicated docs link is missing.
  • Repository freshness has not been recorded.
Next action

How to start evaluating Text-To-Lottie

Inspect repository

Check license, recent activity, issues, examples, and security-sensitive code paths.

Open source

Open Source

Start from the official source before adopting third-party instructions.

Open source

Install the skill

Add the Text-To-Lottie skill to a compatible agent environment.

npx skills add diffusionstudio/lottie

Run the local harness manually

Install dependencies and start the local Lottie preview app.

npm install && npm run dev
Compare

Alternatives and nearby resources

Use related resources to compare category fit, license, deployment model, and first-workflow behavior.

FAQ

Common questions about Text-To-Lottie

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.