Skills

text-to-lottie: Generate production-ready Lottie animations with a coding agent

Ideal for generating production-ready Lottie animations from a single sentence in a coding agent that supports Skills, with immediate preview in the built-in player; after installation, the agent must first set up the workspace through the text-to-lottie workflow.

Official source · text-to-lottie

Install

npx skills add diffusionstudio/lottie

Who it's for

text-to-lottie is for people who already use a coding agent that supports Skills and want to create Lottie animations ready for use in a product directly from natural language. The official description presents it as an open-source framework that generates animations through Claude Code, Codex, or another agent that supports Skills. It is not a timeline editor, nor does it provide a standalone desktop app that works without an agent.

A better starting point is that you are comfortable with the agent creating a workspace, writing scene files, and checking the result in the built-in player. If you only want to keyframe animations manually, or do not plan to install Skills, this skill will not help. The official page does not list a design-template marketplace, nor does it say that the skill can be invoked without installation. Before trying it for the first time, confirm that the current agent can read installed Skills and that you are willing to let it modify animation files in the workspace.

First try in 3 minutes

Prerequisite: the current coding agent must be able to install Skills. The official instructions provide only one installation command; treat it as the sole supported path:

npx skills add diffusionstudio/lottie

This command installs the skill in a Skills location readable by the current agent. Do not use another package name or marketplace entry in parallel.

After installation, make one observable and reversible request: ask the agent to use text-to-lottie to generate a short looping animation with simple shapes, and first have it verbally confirm the project name and scene name it will create. Generation writes files, so it has side effects; let it write to disk only after you approve. Do not start by modifying existing production assets. First validate the workflow with a disposable test animation.

The official description gives the following success signals: the agent prepares a workspace and built-in player, each animation exists as a scene in the project, and it loads automatically from public/projects/<project>/<scene>/lottie.json; as the agent continues editing files, the player updates in real time. Once lottie.json appears at that path and the player can play it, the first attempt is complete. The official page does not specify a default project name, scene name, or player start command, so the evidence goes no further than this.

Reference page: https://github.com/diffusionstudio/lottie

Use cases

Case one: generate a Lottie animation from one sentence. The official workflow is to install the skill and then ask the coding agent to use text-to-lottie to generate a Lottie animation. Describe the object, movement, and whether it should loop, and let the agent produce it with the skill. The evidence covers “generate a Lottie animation” itself; it does not provide steps for a preset theme library, batch export, or video conversion. Afterward, check in the player that the motion matches the description before deciding whether to copy lottie.json to another project. If the description includes multiple layers or complex paths, still ask the agent to produce a playable first version and refine it gradually.

Case two: iterate against the scene file in the built-in player. The official page states that animations exist as scenes in the project, load automatically from public/projects/<project>/<scene>/lottie.json, and update in real time as the agent edits them. This is suitable for changing a color, easing, or layer first and immediately checking whether the player refreshes. The page does not provide a port, start script, or keyboard shortcut; if the player does not start, only verify that the file was written at that path, and do not invent a start command. During iteration, change only one observable property at a time so you can use the player to determine whether it was written to the correct scene.

Boundaries of use

The capability ends at “generate production-ready Lottie animations with a coding agent that supports Skills”; it does not promise an offline render farm or non-Lottie formats. Installation recognizes only npx skills add diffusionstudio/lottie. Claude Code and Codex are named examples, while the text also says that other agents supporting Skills can be used; do not interpret this list as an exclusive allowlist. The path pattern is known, but the project name, scene name, and player start method are not documented; when information is missing, rely on the directories the agent actually creates and on whether the player refreshes. Confirm the path before writing to avoid overwriting a scene you have not backed up. The official page also gives no uninstall, rollback, or cross-repository reuse steps; when removal is needed, handle only the skill files you have confirmed were written by this installation.