# diffusionstudio/lottie Skill

> Skill for Claude Code and Codex to generate Lottie animations via prompts

An open-source skill that allows AI coding agents like Claude Code and Codex to generate production-ready Lottie animations from text descriptions. It supports precise motion design terminology, editable control slots, and browser-verified previews.

## How it works

Install: npx skills add diffusionstudio/lottie

Works with Claude Code/Codex. Prompt like a motion designer: use ease-in/ease-out terms; describe camera pans, zooms, pushes; provide SVGs or Figma exports; specify FPS and duration; explicitly ask for editable controls.

Video shows agent sessions producing: an animated candlestick chart (150 frames / 5s, 350 candles, each candle finishes before the next via fractional-frame timing, colors \#06699E bg / \#FF3D47 loss / \#1AE08C gain), an animated Spotify logo with live Logo color and Stroke width slots, and a gradient 'hello' script animation (stroke, opacity, gradient start/end controls) rebuilt after deletion.

## What it is for

- Generate Lottie JSON animations directly from natural language prompts
- Convert static SVG or Figma assets into animated UI elements
- Expose configurable dynamic properties like stroke colors and widths in exported animations

## Key points

- Quick installation via npx skills add diffusionstudio/lottie
- Works with AI agent workflows in Claude Code and OpenAI Codex
- Understands motion design terms like ease curves, camera pans, and fractional-frame timing
- Produces animations with live editable control slots
- Outputs standard, production-ready Lottie JSON files

## Pricing

Open source. Free and open source

## Details

- Type: Tip
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: yes
- Platforms: Command line
- For: Developers and UI designers using AI coding agents
- Alternative to: LottieFiles, Bodymovin
- Tags: lottie, animation, claude code, ai agents, motion design

## Why it was saved

- [@toolfolio, 9 June 2026](https://x.com/toolfolio/status/2064260239260880981): Describe any animation and get a real Lottie file with editable controls, verified in a browser preview.

## Compare

- [Alternatives to LottieFiles](https://xiry.app/alternatives/lottiefiles.md)

## Related

- [Remotion Agent Skills](https://xiry.app/resources/remotion-agent-skills): Agent skills enabling AI coding agents to create programmatic Remotion videos (GitHub repo, Open source)
- [Skills.sh](https://xiry.app/resources/skills-sh): Open directory and CLI for discovering and installing AI agent skills (Web app, Free)
- [Transitions.dev](https://xiry.app/resources/transitions-dev): Curated library of copy-paste web app micro-interactions and transitions (Web app, Freemium)
- [agency-agents](https://xiry.app/resources/agency-agents): Curated library of specialized AI agent personas and workflows for Claude Code (GitHub repo, Open source)
- [Impeccable](https://xiry.app/resources/impeccable): Design vocabulary, rules, and skills for AI coding agents. (Web app, Free)
- [agent-experience Claude Code Skill](https://xiry.app/resources/agent-experience-claude-code-skill): Audits documentation readability for AI agents by running parallel onboarding tests (Tip, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/diffusionstudio-lottie-skill

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.