lottie
Generate production-ready Lottie animations with Claude Code or Codex
What is it?
What it is
Text-to-lottie is an open-source framework for generating production‑ready Lottie animations using coding agents (Claude Code, Codex, etc.) that support the skill system.
Why it exists
To enable developers and designers to create Lottie animations via natural‑language prompts, eliminating manual keyframing and allowing rapid iteration with real‑time preview.
Who should use it
Developers and motion designers who want to generate Lottie animations via AI coding agents, especially those integrating Lottie into web, mobile, or desktop apps.
Who should avoid it
Users who require fine-grained manual control over animation timelines, those uncomfortable with AI-generated code, or beginners unfamiliar with Lottie and coding agents.
How it works
A quick walkthrough in plain English
How lottie works
Step 1 of 3
You interact with it
Open lottie, send a request, or connect it to your stack.
Features
Advantages
- Open source (MIT)
- Active TypeScript ecosystem
- Self-hosted deployment options
Disadvantages
- Requires operational ownership for self-hosted setups
- Community support varies by project maturity
Installation
native
npx skills add diffusionstudio/lottie
FAQ
How do I install the Text-to-Lottie skill for my coding agent?
Run `npx skills add diffusionstudio/lottie` to add the skill, then ask your coding agent to generate a Lottie animation using the `text-to-lottie` skill.
What should I include in my prompt to get high-quality Lottie animations?
Ground the model with concrete assets (SVGs, screenshots, data), use motion design terminology (ease-in, ease-out, ease-in-out), think like a camera operator (pushes, pans, zooms), request any needed controls explicitly, and specify FPS and duration if required.
Where are generated Lottie files stored and how can I preview them?
Each animation lives as a scene inside a project under `public/projects/<project>/<scene>/lottie.json`. The included player loads and live-updates these files, allowing you to inspect, scrub, and refine the animation in real time.
How can I use a generated Lottie animation in a vanilla HTML page?
Include lottie-web via `<script src="https://unpkg.com/lottie-web/build/player/lottie.min.js" ></script>`, create a container div, and call `lottie.loadAnimation` with the container, renderer set to "svg", loop/autoplay options, and the path to your JSON file.
What are the platform-specific ways to render Lottie animations generated by this skill?
For React Native use `@shopify/react-native-skia` with Skottie; for iOS Swift use `LottieAnimationView`; for Android Kotlin use `LottieAnimationView` with `setAnimation`; for Flutter add `lottie` dependency and use `Lottie.asset`. Each snippet is provided in the README.
Featured in Videos
YouTube tutorials and walkthroughs for lottie
Alternatives
Similar projects ranked by category, topics, and text overlap.
