SOP: Text-to-Lottie — Animaciones Profesionales con IA

Text-to-Lottie es un skill open source que genera animaciones Lottie desde prompts de texto, usando Claude Code o Codex CLI. Convertís una descripción en lenguaje natural en una animación vectorial lista para web, apps, y presentaciones.

• [ ] Node.js ≥ 18 instalado
• [ ] Claude Code CLI o Codex CLI configurado
• [ ] Cuenta de GitHub (para clonar el repo si querés modificar)
• [ ] Editor de texto para ajustar prompts

`bash npx skills add diffusionstudio/lottie

npx skills list | grep lottie

`

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

La calidad de la animación depende del prompt. Estos son los 5 principios extraídos del autor:

### 1. Dale contexto concreto al modelo Usá SVGs, datos reales, o screenshots como base. El modelo genera animaciones mucho mejores cuando tiene assets concretos para trabajar.

`bash "Animá el SVG en /assets/logo.svg con un efecto de dibujo progresivo..." `

### 2. Usá terminología de motion design No digas "que aparezca lento". Decí: - ease-in, ease-out, ease-in-out - trim-path animation - sequential fade-in - bezier curves

### 3. Pensá como camarógrafo Las animaciones profesionales usan movimiento de cámara: - camera push → acercamiento - pan left/right → barrido horizontal - zoom out with ease → alejamiento suave - rig-like motion through group transforms

### 4. Pedí los controles que necesitás Por defecto solo se expone un control de color de fondo. Si necesitás más: - Add editable Skottie slots for the logo color and stroke width - Include preview controls for color, speed, and direction

### 5. Especificá FPS y duración `bash "...en una composición de 150 frames a 30 FPS" "...60-frame loop animation at 24 FPS" `

### Prompt 1 — Gráfico de Velas Financiero ` 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 — Logo de Spotify Animado ` 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 — Path SVG con Gradiente ` 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 para: - Animaciones single-scene cortas - Animar SVGs exportados de Figma o Illustrator - Gráficos data-driven (barras, velas, líneas de tiempo) - Iconos animados para UI - Micro-interacciones en productos digitales - Logos animados para pitch decks

### ❌ No usar para: - Video/audio compositing → usar Remotion en su lugar - Animaciones multi-shot con transiciones complejas - Contenido que requiera edición de audio sincronizada - Efectos 3D pesados (Lottie es 2D vectorial)

`bash

claude --skill diffusionstudio/lottie \ "Usá el prompt en prompts/lottie-{proyecto}.txt"

`

• Actualizar el skill: npx skills update diffusionstudio/lottie
• Versionar prompts: Guardar en prompts/ con fecha (lottie-2026-06-09.txt)
• Librería de assets: Mantener un assets/lottie/ con los .json generados + screenshot .png de preview
• Repo de referencia: [github.com/diffusionstudio/lottie](https://github.com/diffusionstudio/lottie) — chequear issues y PRs cada 2 semanas