Generate Production-Ready Lottie Animations with Claude Code

What is Text-to-Lottie?

Text-to-Lottie is an open-source harness that lets you generate production-ready Lottie animations using Claude Code, Codex, or any other coding agent that supports skills. Instead of manually crafting complex JSON or wrestling with After Effects keyframes, you describe the animation in natural language and let the agent build it.

The project is built by diffusion.studio and is available on GitHub at diffusionstudio/lottie. It has already gained significant traction with over 1.9k stars and 95 forks.

Why This Matters

Lottie animations are everywhere — from loading spinners in mobile apps to micro-interactions on the web. But creating them traditionally requires either:

• Deep expertise in After Effects and the Bodymovin plugin
• Manual editing of complex JSON structures
• Hiring a motion designer

Text-to-Lottie eliminates these barriers. You can now generate, preview, and iterate on animations entirely through natural language prompts, making motion design accessible to any developer.

Quick Start

Getting started takes seconds. Install the skill with a single command:

npx skills add diffusionstudio/lottie

Then ask your coding agent to generate a Lottie animation. Here's an example prompt:

Create a Lottie animation from the SVG path in https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg. Reveal the path with an animation that follows the natural path direction. Apply a premium apple themed gradient to the path. Use ease-in-out timing, a transparent background, and preserve the original SVG geometry.

The agent will set up a harness and provide a built-in player so you can inspect and edit the generated animation in real time.

Prompt Guide

To get the best results, follow these five principles:

1. Ground the Model

Provide SVGs, real-world data, or screenshots whenever possible. Results are significantly better when the animation is based on concrete assets rather than abstract descriptions.

2. Use Motion Design Terminology

Describe timing and movement using standard motion design language: ease-in, ease-out, ease-in-out. These terms map directly to animation curves and produce predictable results.

3. Think Like a Camera Operator

Professional motion graphics often rely on camera movement. Include camera pushes, pans, zooms, and rig-like motion in your prompt. The agent can simulate these through group transforms.

4. Request the Controls You Need

By default, outputs usually only expose a background color control. If you want to customize other properties — like stroke width, color, or opacity — explicitly ask the agent to create controls for them.

5. Specify FPS and Duration

If your animation requires a specific frame rate or length, include the desired FPS and total frame count in the prompt. This ensures the output matches your project's technical requirements.

Using the Generated Animation

Once generated, animations can be used directly as Lottie JSON files or imported into After Effects for further refinement.

Web / Vanilla HTML

<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')

Conclusion

Text-to-Lottie is a powerful tool that brings motion design into the developer workflow. By combining the expressiveness of natural language with the precision of code, it enables rapid prototyping and production of high-quality animations. Whether you're building a mobile app, a web interface, or a game, this harness can save you hours of manual work.

Check out the GitHub repository to get started, and join the community on Discord for updates and support.

Source

diffusionstudio/lottie: Generate production-ready Lottie animations with Claude Code or Codex