Text-to-Lottie is an open-source harness designed for generating production-ready Lottie animations. Its core methodology revolves around integrating with large language models or coding agents, such as Claude or Codex, that support a "skills" paradigm. The system functions as a callable skill that, when invoked by a coding agent, translates natural language prompts into Lottie JSON animations.

To utilize this system, a user first installs the skill via npx skills add diffusionstudio/lottie. Subsequently, the user provides a detailed natural language prompt to their coding agent, requesting a specific Lottie animation. The agent, leveraging the installed "text-to-lottie" skill, processes this prompt. The underlying mechanism involves the agent interpreting the user's request and programmatically generating the Lottie JSON data structure, which defines the animation's properties, timeline, and visual elements. A key feature is the provision of a harness that allows for immediate inspection and editing of the generated Lottie animation via an included player.

Effective prompting is crucial for optimal results and is guided by several principles:

1. Grounding the Model: Providing concrete assets such as SVG paths, real-world data, or screenshots significantly enhances the quality and relevance of the generated animation. This implies the agent can parse and integrate external visual data into the animation definition.
2. Motion Design Terminology: Employing precise motion design language (e.g., "ease-in," "ease-out," "ease-in-out") enables the system to generate accurate animation timing curves and interpolation functions, as the agent is trained to map these terms to corresponding Lottie animation properties (e.g., ks.a for animation keyframes, ti, to for bezier control points).
3. Camera Movement Simulation: Prompts can specify camera-like movements (pushes, pans, zooms, rig-like motions). The system translates these into group transforms within the Lottie composition, applying transformations (translation, scale, rotation) to layers or groups of layers, effectively simulating camera motion through p (position), s (scale), r (rotation) properties on layer t (transform) objects.
4. Explicit Control Exposure: Users can request that specific animation properties, beyond the default background color, be exposed as customizable controls within the generated Lottie structure, allowing for post-generation parameter adjustments.
5. FPS and Duration Specification: Defining the desired frames per second (FPS) and total animation duration ensures the generated Lottie output adheres to specific timing requirements, influencing the number of frames and the overall speed of the animation's playback as defined by the fr (frame rate) and op (out point) parameters in the Lottie JSON.

The generated Lottie animations, typically output as .json files, are production-ready and highly versatile. They can be directly imported into professional tools like After Effects for further refinement. For deployment, the animations are compatible across various platforms:

• Web/Vanilla HTML: Integrated using the lottie-web JavaScript library, enabling dynamic loading and playback in a browser via lottie.loadAnimation({ container: HTMLElement, renderer: 'svg' | 'canvas', loop: boolean, autoplay: boolean, path: string }).
• React Native: Rendered using lottie-react-native's LottieView component, configured with $source={{ uri: string | number }}$ (for local or remote animation data), autoPlay, loop, and style props.
• React Native Skia: Offers more advanced control via Skia's Skottie module, allowing runtime customization of animation properties, assets, and typographies. It leverages Skia.Skottie.Make(JSON.stringify(animationData)) to create an animation object, and enables frame-by-frame control using useClock and useDerivedValue to precisely manage the frame prop of the Skottie component.
• iOS Swift: Integrated using the Lottie framework, initializing an LottieAnimationView(name: String) and controlling its playback with play() and loopMode properties.
• Android Kotlin: Utilizes the LottieAnimationView component, setting the animation resource with setAnimation(R.raw.animation) and managing playback with playAnimation() and loop(true).
• Flutter: Uses the lottie package, loading animations via Lottie.asset('assets/animation.json').