Genera Animaciones Lottie Listas para Producción con Claude Code

¿Qué es Texto-a-Lottie?

Texto-a-Lottie es un harness de código abierto que te permite generar animaciones Lottie listas para producción usando Claude Code, Codex o cualquier otro agente de codificación que admita habilidades. En lugar de crear manualmente JSON complejo o lidiar con fotogramas clave de After Effects, describes la animación en lenguaje natural y dejas que el agente la construya.

El proyecto está creado por diffusion.studio y está disponible en GitHub en diffusionstudio/lottie. Ya ha ganado una tracción significativa con más de 1.9k estrellas y 95 bifurcaciones.

Por Qué Esto Importa

Las animaciones Lottie están en todas partes — desde indicadores de carga en aplicaciones móviles hasta microinteracciones en la web. Pero crearlas tradicionalmente requiere:

• Conocimiento profundo de After Effects y el plugin Bodymovin
• Edición manual de estructuras JSON complejas
• Contratar a un diseñador de movimiento

Texto-a-Lottie elimina estas barreras. Ahora puedes generar, previsualizar e iterar sobre animaciones completamente a través de indicaciones en lenguaje natural, haciendo que el diseño de movimiento sea accesible para cualquier desarrollador.

Inicio Rápido

Comenzar toma segundos. Instala la habilidad con un solo comando:

npx skills add diffusionstudio/lottie

Luego pídele a tu agente de codificación que genere una animación Lottie. Aquí hay un ejemplo de indicación:

Crea una animación Lottie a partir de la ruta SVG en https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg. Revela la ruta con una animación que siga la dirección natural de la ruta. Aplica un degradado premium con temática de Apple a la ruta. Usa temporización ease-in-out, un fondo transparente y preserva la geometría SVG original.

El agente configurará un harness y proporcionará un reproductor integrado para que puedas inspeccionar y editar la animación generada en tiempo real.

Guía de Indicaciones

Para obtener los mejores resultados, sigue estos cinco principios:

1. Fundamenta el Modelo

Proporciona SVGs, datos del mundo real o capturas de pantalla siempre que sea posible. Los resultados son significativamente mejores cuando la animación se basa en activos concretos en lugar de descripciones abstractas.

2. Usa Terminología de Diseño de Movimiento

Describe la temporización y el movimiento usando el lenguaje estándar de diseño de movimiento: ease-in, ease-out, ease-in-out. Estos términos se asignan directamente a curvas de animación y producen resultados predecibles.

3. Piensa Como un Operador de Cámara

Los gráficos en movimiento profesionales a menudo dependen del movimiento de la cámara. Incluye empujes de cámara, paneos, zooms y movimiento tipo grúa en tu indicación. El agente puede simular estos a través de transformaciones de grupo.

4. Solicita los Controles que Necesitas

Por defecto, las salidas generalmente solo exponen un control de color de fondo. Si deseas personalizar otras propiedades — como el ancho del trazo, el color o la opacidad — pídele explícitamente al agente que cree controles para ellas.

5. Especifica FPS y Duración

Si tu animación requiere una velocidad de fotogramas o duración específica, incluye los FPS deseados y el número total de fotogramas en la indicación. Esto asegura que la salida coincida con los requisitos técnicos de tu proyecto.

Usando la Animación Generada

Una vez generada, las animaciones se pueden usar directamente como archivos JSON de Lottie o importarse a After Effects para refinamiento adicional.

Web / HTML Vanilla

<script src="https://unpkg.com/lottie-web/build/player/lottie.min.js"></script>
<div id="anim"></div>
<script>
lottie.loadAnimation({
  container: document.getElementById("anim"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "/animations/my-animation.json"
});
</script>

React Native

npm install lottie-react-native

import LottieView from "lottie-react-native";

export default function Loader() {
  return (
    <LottieView
      source={require("./animation.json")}
      autoPlay
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}

iOS Swift

import Lottie

let animationView = LottieAnimationView(name: "animation")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
view.addSubview(animationView)
animationView.play()

Android Kotlin

val view = findViewById<LottieAnimationView>(R.id.animationView)
view.setAnimation(R.raw.animation)
view.loop(true)
view.playAnimation()

Flutter

dependencies:
  lottie: ^latest

import 'package:lottie/lottie.dart';

Lottie.asset('assets/animation.json')

Conclusión

Texto-a-Lottie es una herramienta poderosa que integra el diseño de movimiento en el flujo de trabajo del desarrollador. Al combinar la expresividad del lenguaje natural con la precisión del código, permite la creación rápida de prototipos y la producción de animaciones de alta calidad. Ya sea que estés construyendo una aplicación móvil, una interfaz web o un juego, este harness puede ahorrarte horas de trabajo manual.

Visita el repositorio de GitHub para comenzar y únete a la comunidad en Discord para actualizaciones y soporte.

Fuente

diffusionstudio/lottie: Genera animaciones Lottie listas para producción con Claude Code o Codex