SOP: Text-to-Lottie — Professional AI Animations

Text-to-Lottie is an open source skill that generates Lottie animations from text prompts, using Claude Code or Codex CLI. You turn a natural-language description into a vector animation ready for web, apps and presentations.

• [ ] Node.js ≥ 18 installed
• [ ] Claude Code CLI or Codex CLI configured
• [ ] GitHub account (to clone the repo if you want to modify it)
• [ ] Text editor to tweak prompts

`bash npx skills add diffusionstudio/lottie

npx skills list | grep lottie

`

Repo: [github.com/diffusionstudio/lottie](https://github.com/diffusionstudio/lottie)

Animation quality depends on the prompt. These are the 5 principles distilled from the author:

### 1. Give the model concrete context Use SVGs, real data, or screenshots as a base. The model generates far better animations when it has concrete assets to work with.

`bash "Animate the SVG at /assets/logo.svg with a progressive drawing effect..." `

### 2. Use motion design terminology Don't say "make it appear slowly". Say: - ease-in, ease-out, ease-in-out - trim-path animation - sequential fade-in - bezier curves

### 3. Think like a cinematographer Professional animations use camera movement: - camera push → zoom in - pan left/right → horizontal sweep - zoom out with ease → smooth pull-back - rig-like motion through group transforms

### 4. Ask for the controls you need By default only a background color control is exposed. If you need more: - Add editable Skottie slots for the logo color and stroke width - Include preview controls for color, speed, and direction

### 5. Specify FPS and duration `bash "...in a 150-frame composition at 30 FPS" "...60-frame loop animation at 24 FPS" `

### Prompt 1 — Financial Candlestick Chart ` A premium fintech Lottie of a transparent-background candlestick chart with 350 real TSLA-style red/green candles revealing rapidly left to right; each slim candle grows vertically into its OHLC body and matching-color wick, with tight spacing, natural clustered volatility, no grid or labels, and a single parent camera group that briefly holds then pans smoothly with ease-out motion across the forming market trend in a 150-frame, 30 FPS composition. `

### Prompt 2 — Animated Spotify Logo ` Create a Lottie animation from the Spotify SVG logo where the circular mark pops in, the three internal mark strokes draw on with trim-path animation, and the wordmark characters rise from below while fading in sequentially. Add editable Skottie slots for the logo color and mark stroke width, with preview controls for both. `

### Prompt 3 — SVG Path with Gradient ` Create a Lottie animation from the SVG path in Hello/blob/main/SVG/hello-en.svg. Reveal the path with an animation that follows the natural path direction. Apply a premium apple themed gradient to the path. Use ease-in-out timing, a transparent background, and preserve the original SVG geometry. `

### ✅ Ideal for: - Short single-scene animations - Animating SVGs exported from Figma or Illustrator - Data-driven graphics (bars, candles, timelines) - Animated icons for UI - Micro-interactions in digital products - Animated logos for pitch decks

### ❌ Don't use it for: - Video/audio compositing → use Remotion instead - Multi-shot animations with complex transitions - Content that requires synced audio editing - Heavy 3D effects (Lottie is 2D vector)

`bash

claude --skill diffusionstudio/lottie \ "Use the prompt in prompts/lottie-{project}.txt"

`

• Update the skill: npx skills update diffusionstudio/lottie
• Version your prompts: Save them in prompts/ with a date (lottie-2026-06-09.txt)
• Asset library: Keep an assets/lottie/ with the generated .json files + a preview screenshot .png
• Reference repo: [github.com/diffusionstudio/lottie](https://github.com/diffusionstudio/lottie) — check issues and PRs every 2 weeks