lottie
Generate production-ready Lottie animations with Claude Code or Codex
Text-to-Lottie is an agent skill framework that enables coding agents to generate production-ready Lottie animations from natural language prompts. When installed, AI agents can create animations from SVG paths, apply gradients, control timing curves, and manage camera movements using motion design terminology. The framework includes a live-updating player workspace that lets developers inspect and refine generated animations in real-time as the agent edits them. Generated animations export as standard Lottie JSON files compatible with web, iOS, Android, React Native, Flutter, and After Effects.
Key Features
Use Cases
- 01Creating animated logo reveals from SVG paths with branded gradients and professional timing
- 02Generating loading animations and progress indicators for web and mobile applications
- 03Building motion graphics with camera movements, pans, and zooms for marketing materials
- 04Prototyping animation concepts quickly before refining in After Effects
- 05Producing data-driven animations based on real-world datasets or screenshots
- 06Creating cross-platform animations that work identically on iOS, Android, web, and Flutter apps
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
lottie — FAQ
What is the Text-to-Lottie agent skill?+
Text-to-Lottie is an open-source framework that enables coding agents like Claude Code and Codex to generate production-ready Lottie animations from natural language prompts. It provides a workspace with a live-updating player so developers can inspect and refine animations as the agent creates them.
How do I install the Text-to-Lottie skill?+
Install the skill by running 'npx skills add diffusionstudio/lottie' in your terminal. Once installed, you can prompt your coding agent to create Lottie animations using the text-to-lottie framework, and it will set up the workspace and player automatically.
Which AI coding agents work with this skill?+
The skill works with Claude Code, Codex, and any other coding agent that supports the skills framework. The agent must be able to execute code and work with the included workspace and player components.
Do I need API keys or paid services to use Text-to-Lottie?+
The Text-to-Lottie framework itself is open-source and free to use. However, you'll need access to a compatible coding agent like Claude Code or Codex, which may have their own subscription or API requirements.
Can I use the generated animations in production apps?+
Yes, generated animations are production-ready Lottie JSON files that work across web (vanilla HTML, React), iOS (Swift), Android (Kotlin), React Native (via Skia), and Flutter. You can also import them into After Effects for further refinement.
What makes a good prompt for generating Lottie animations?+
The best prompts include concrete assets like SVG paths or screenshots, use motion design terminology (ease-in/out), specify camera movements when needed, request specific controls you want exposed, and define FPS and duration if required. Grounding the prompt with real assets produces significantly better results.
How do I install lottie?+
Open the source repository on GitHub and follow its README. lottie is a skill — MCP Agents Market links you directly to the official repo.
Is lottie free?+
lottie is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.