Tres patrones típicos de Lottie: check de éxito, loader continuo y puntos de carga — cada uno generado en pocos segundos a partir de un prompt.
🎯 Qué es Lottie y por qué es diferente
Lottie es una biblioteca de animación basada en JSON descriptivo — el formato captura vectores, colores y curvas de animación de forma compacta. A diferencia de Three.js o GSAP, el alcance es intencionalmente pequeño: animaciones limpias, ligeras y hechas para repetirse.
✗ Donde Lottie no es la opción adecuada
- ✗Escenas 3D con perspectiva e iluminación real.
- ✗Coreografías largas con múltiples elementos sincronizados.
- ✗Animaciones de datos (gráficos, charts complejos).
✓ Donde Lottie domina
- ✓Microanimaciones de marca: marcas de verificación, loaders, íconos en bucle.
- ✓Onboarding de apps: ilustración que se anima para explicar un paso.
- ✓Clips rápidos para redes sociales donde lo limpio y preciso vale más que lo elaborado.
⚡ Por qué Claude acierta más rápido
El secreto de Lottie con Claude: un alcance pequeño significa que el modelo no hay espacio para complicarse. El resultado casi siempre está listo para producción desde el primer intento: limpio, correcto y útil.
Alcance delimitado
Una microanimación tiene un inicio, un desarrollo y un final claros. Claude no necesita inferir la coreografía: la estructura del problema es lo suficientemente pequeña como para resolverlo con certeza.
Sin decisiones de arquitectura
No hay ninguna escena 3D, pipeline WebGL ni reconciler de React que gestionar. El modelo escribe SVG + keyframes o JSON Lottie directamente — con mínimas posibilidades de error.
Enorme biblioteca comunitaria
Encuentra una animación Lottie que se acerque a lo que quieres, descríbesela a Claude y pídele que la recree en la composición de Remotion. El patrón ya existe; el modelo lo reconstruye con fidelidad.
💡 Consejo de workflow
Busca en el LottieFiles.com algo parecido a lo que quieres. Describe lo que viste para Claude ("una animación de un ícono de corazón que late en loop, vectorial, con fondo transparente") — la descripción basada en una referencia real mejora mucho el resultado.
🛒 La prueba de calidad de Lottie
La prueba decisiva: pídele a Claude una "animación de escaneo de código de barras en la caja de una tienda de conveniencia". El resultado esperado es limpio, correcto y útil desde la primera respuesta, sin iteraciones.
Crie uma animação Lottie-style para Remotion: - Scanner de código de barras num caixa de loja - Linha de scan vermelho varrendo de cima a baixo - Ícone do código de barras em vetorial simples - Loop contínuo, fundo transparente - Clean, sem elementos desnecessários
Una línea roja recorre el código de barras: exactamente lo que sale de un único prompt al estilo Lottie.
📱 Casos de uso: redes sociales, onboarding, marca
Lottie brilla en tres contextos: social clips que necesitan movimiento limpio y rápido, incorporación a una app donde las ilustraciones se animan para guiar al usuario, y microcontenido de marca con una identidad visual coherente.
Clips para redes sociales
Motion limpio, bucle perfecto, sin distracciones. El tipo de animación que funciona en Reels y Stories sin parecer "hecha con una herramienta".
Onboarding de apps
Ilustraciones que se mueven para explicar un paso de UI. Son livianas, cargan rápido y se animan con precisión — el estándar del mercado móvil.
Microcontenido de marca
Íconos animados, pantallas de carga con la marca, confirmaciones de acciones. Pequeños detalles que dan vida a la identidad visual.
🔷 Lottie vs animación CSS pura
Para microanimaciones dentro de Remotion, Lottie y CSS @keyframes son intercambiables. La diferencia es que Lottie es reutilizable fuera de Remotion (web, mobile, apps), mientras que CSS @keyframes está contenido en la composición.
🗺️ El flujo prompt→Lottie→Remotion
El flujo de trabajo con Lottie en Remotion es lineal y rápido. Describes la animación, Claude genera el JSON o el SVG animado, lo incluyes en la composición de Remotion y renderizas: tres etapas, sin idas y vueltas.
💡 Cuándo iterar
Lottie rara vez necesita iteraciones, pero cuando las necesita, son rápidas. Como el alcance es pequeño, el seguimiento es preciso: «aumenta el radio del loader» o «cambia el color del check a verde»; una línea por ajuste.
📐 Anatomía de un buen prompt de Lottie
Los prompts de Lottie de calidad tienen cuatro ingredientes: el objeto que se anima, el movimiento en palabras físicas, el contexto de uso e la instrucción de loop. Con estos cuatro, Claude entrega a la primera.
✗ Prompt incompleto
- ✗"Haz una animación de un corazón." — sin contexto de uso, sin loop.
- ✗"Animate this icon." — sin describir físicamente el movimiento.
- ✗Sin mencionar el fondo transparente cuando sea necesario.
✓ Prompt completo
- ✓"Ícono de corazón que palpita — escala 1→1.2→1 — loop de 1s."
- ✓"Fondo transparente, estilo vectorial flat, color #ef4444."
- ✓"Para un clip para redes sociales — clean, sin bordes ni sombras."
🔷 Lottie es el atajo adecuado cuando…
Necesitas un resultado rápido, la animación es sencilla y limpia, el contexto es social / mobile / onboarding o quieres algo que también funcione fuera de Remotion. En los demás casos, GSAP, D3 o Three.js ofrecen más.
📌 Resumen del módulo
Siguiente módulo:
2.6 — Mapa de decisión: qué librería usar para cada tipo de motion.