ARTICULO
Setup en 15 minutos. Cero costo. Animaciones vectoriales listas para web, apps y presentaciones.
109| 112|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étrica | Valor |
|---|---|
| Instalación | 1 comando (npx skills add) |
| Output | .json Lottie (pesa KB, no MB) |
| Compatibilidad | Web, React Native, iOS, Android, Figma |
| Skills requeridos | Claude Code o Codex CLI instalados |
bash
134|npx skills add diffusionstudio/lottie
npx skills list | grep lottie
136|La calidad de la animación depende del prompt. Estos son los 5 principios extraídos del autor:
144|bash
147|"Animá el SVG en /assets/logo.svg con un efecto de dibujo progresivo..."
148|
ease-in, ease-out, ease-in-out
152|- trim-path animation
153|- sequential fade-in
154|- bezier curvescamera push → acercamiento
158|- pan left/right → barrido horizontal
159|- zoom out with ease → alejamiento suave
160|- rig-like motion through group transformsAdd editable Skottie slots for the logo color and stroke width
164|- Include preview controls for color, speed, and directionbash
167|"...en una composición de 150 frames a 30 FPS"
168|"...60-frame loop animation at 24 FPS"
169|
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|
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|
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|bash
claude --skill diffusionstudio/lottie \ 225| "Usá el prompt en prompts/lottie-{proyecto}.txt"
226|| Check | Qué 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? |
npx skills update diffusionstudio/lottieprompts/ con fecha (lottie-2026-06-09.txt)assets/lottie/ con los .json generados + screenshot .png de preview| Síntoma | Causa probable | Solución |
|---|---|---|
| Animación no se mueve | FPS o frames mal especificados | Revisar "fr": 30 y "op": frames en el JSON |
| SVG distorsionado | El path del SVG tiene viewBox incorrecto | Verificar que el SVG use viewBox="0 0 W H" |
| Colores incorrectos | El modelo ignoró la paleta | Agregar Use exactly these hex colors: #XXX, #YYY al prompt |
| Peso excesivo (>500KB) | Demasiados keyframes | Reducir frames o simplificar la animación |
npx skills add falla | Node < 18 o npm desactualizado | node -v → actualizar si < 18; npm i -g npm@latest |
| Skottie slots no aparecen | No se pidieron en el prompt | Agregar Add editable Skottie slots for... explícitamente |