1| 2| 3| 4| 5| 6|Text-to-Lottie: Animaciones profesionales con IA | ADMP 7| 8| 9| 10| 11| {"@context": "https://schema.org", "@type": "Article", "headline": "Text-to-Lottie: Animaciones profesionales con IA", "description": "SOP paso a paso para generar animaciones Lottie profesionales con IA usando Text-to-Lottie. También exploramos alternativas como DiffusionStudio para flujos de trabajo que requieren generación por difusión en lugar de plantillas Lottie. Setup, prompts, ejemplos reales y checklist de verificación.", "author": {"@type": "Person", "name": "Ariel Di Stefano", "url": "https://arieldistefano.com"}, "publisher": {"@type": "Organization", "name": "ADMP - Ariel Di Stefano", "logo": {"@type": "ImageObject", "url": "https://arieldistefano.com/logo.png"}}, "datePublished": "2026-06-09", "dateModified": "2026-07-06", "mainEntityOfPage": {"@type": "WebPage", "@id": "https://arieldistefano.com/md-to-html/2026-06-09-sop-text-to-lottie-animaciones-profesionales-con-ia.html"}, "wordCount": 925, "inLanguage": "es-AR", "translationOfWork": {"@type": "Article", "@id": "https://arieldistefano.com/md-to-html/2026-06-09-sop-text-to-lottie-professional-ai-animations.html", "url": "https://arieldistefano.com/md-to-html/2026-06-09-sop-text-to-lottie-professional-ai-animations.html", "inLanguage": "en-US"}, "workTranslation": {"@type": "Article", "@id": "https://arieldistefano.com/md-to-html/2026-06-09-sop-text-to-lottie-professional-ai-animations.html", "url": "https://arieldistefano.com/md-to-html/2026-06-09-sop-text-to-lottie-professional-ai-animations.html", "inLanguage": "en-US"}} 16| 102| 103| 104|
105|

ARTICULO

🇪🇸 Español · 🇬🇧 English

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

108|

Setup en 15 minutos. Cero costo. Animaciones vectoriales listas para web, apps y presentaciones.

109|
110| 2026-06-09 111|
112|
113|
114|
115|
116|

¿Para qué sirve?

117|

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.

118|
MétricaValor
Instalación1 comando (npx skills add)
Output.json Lottie (pesa KB, no MB)
CompatibilidadWeb, React Native, iOS, Android, Figma
Skills requeridosClaude Code o Codex CLI instalados
119|
120|
121|
122|
123|

Requisitos Previos

124|
  • [ ] Node.js ≥ 18 instalado
    • 125|
  • [ ] Claude Code CLI o Codex CLI configurado
    • 126|
  • [ ] Cuenta de GitHub (para clonar el repo si querés modificar)
    • 127|
  • [ ] Editor de texto para ajustar prompts
128|
129|
130|
131|
132|

Setup

133|

`bash 134|npx skills add diffusionstudio/lottie

135|

npx skills list | grep lottie

136|

`

137|

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

138|
139|
140|
141|
142|

Paso 1: Principios de Prompt Engineering para Motion

143|

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

144|

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

146|

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

149|

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

155|

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

161|

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

165|

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

170|
171|
172|
173|
174|

Paso 2: Prompts de Ejemplo

175|

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

185|

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

193|

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

201|
202|
203|
204|
205|

Paso 3: Cuándo Usarlo (y Cuándo No)

206|

### ✅ Ideal para: 207|- Animaciones single-scene cortas 208|- Animar SVGs exportados de Figma o Illustrator 209|- Gráficos data-driven (barras, velas, líneas de tiempo) 210|- Iconos animados para UI 211|- Micro-interacciones en productos digitales 212|- Logos animados para pitch decks

213|

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

218|
219|
220|
221|
222|

Paso 4: Workflow para ADMP

223|

`bash

224|

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

226|

`

227|
228|
229|
230|
231|

Paso 5: Checklist de Verificación

232|
CheckQué revisar
☐ FPS¿La animación corre a los FPS especificados?
☐ Colores¿Los colores matchean la paleta del proyecto?
☐ Controles¿Los Skottie slots funcionan? (color, ancho, velocidad)
☐ Peso¿El .json pesa < 100 KB? (optimizar si no)
☐ Compatibilidad¿Se ve bien en lottiefiles.com/preview?
☐ SVG fuente¿El SVG original no se distorsionó en la animación?
☐ Background¿Es transparente donde debe serlo?
233|
234|
235|
236|
237|

Mantenimiento

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

Troubleshooting

247|
SíntomaCausa probableSolución
Animación no se mueveFPS o frames mal especificadosRevisar "fr": 30 y "op": frames en el JSON
SVG distorsionadoEl path del SVG tiene viewBox incorrectoVerificar que el SVG use viewBox="0 0 W H"
Colores incorrectosEl modelo ignoró la paletaAgregar Use exactly these hex colors: #XXX, #YYY al prompt
Peso excesivo (>500KB)Demasiados keyframesReducir frames o simplificar la animación
npx skills add fallaNode < 18 o npm desactualizadonode -v → actualizar si < 18; npm i -g npm@latest
Skottie slots no aparecenNo se pidieron en el promptAgregar Add editable Skottie slots for... explícitamente
248|
249|
250|
251|
252|

Referencias

253|
  • [Repo oficial: diffusionstudio/lottie](https://github.com/diffusionstudio/lottie)
    • 254|
  • [LottieFiles Preview](https://lottiefiles.com/preview) — para testear .json generados
    • 255|
  • [Lottie Web Player](https://github.com/LottieFiles/lottie-player) — para embeber en HTML
    • 256|
  • [Skottie (Skia Lottie)](https://skia.org/docs/user/modules/skottie/) — runtime de Lottie en C++
    • 257|
  • [Remotion](https://remotion.dev) — para video/audio compositing (alternativa cuando Lottie no alcanza)
258|
— Ariel Di Stefano
259|
260|