lottie README

The project's README from github.com/diffusionstudio/lottie. As one markdown file: README.md.

Text to Lottie

English | 繁體中文

Text-to-lottie is an open-source framework for generating production ready Lottie animations with claude code/codex or any other coding agent supporting skills.

Created with Text-to-Lottie

Quick Start

Install the skill:

npx skills add diffusionstudio/lottie

Then ask your coding agent to generate a Lottie animation using text-to-lottie.

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 sets up the workspace and the included player, where each animation lives as a scene inside a project. Scenes load automatically from public/projects/<project>/<scene>/lottie.json and live-update in the player as the agent edits them — so you can inspect, scrub, and refine the generated Lottie in real time.

Prompt guide

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.

2. Use motion design terminology

Describe timing and movement using motion design language like ease-in, ease-out, and ease-in-out.

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.

4. Request the controls you need

By default, outputs usually only expose a background color control. If you want to customize other properties, 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.

Using the Generated Animation

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

Use React Native Skia to render Lottie animations via its Skottie module. It supports iOS, Android, and web, and lets you customize animation properties, assets, and typographies at runtime.

import { Skia, Canvas, Skottie, useClock } from "@shopify/react-native-skia";
import { useDerivedValue } from "react-native-reanimated";

const animation = Skia.Skottie.Make(JSON.stringify(require("./animation.json")));

export default function Loader() {
  const clock = useClock();
  const frame = useDerivedValue(
    () => ((clock.value / 1000) % animation.duration()) * animation.fps()
  );
  return (
    <Canvas style={{ width: 200, height: 200 }}>
      <Skottie animation={animation} frame={frame} />
    </Canvas>
  );
}

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: ^1.0.0

import 'package:lottie/lottie.dart';

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

lottie (diffusionstudio/lottie)

Searching Database…

5.6K ·GitHub
Lottie
What is this?Text-to-Lottie is an open-source framework that lets you generate production-ready Lottie animations by describing them in plain language to Claude Code, Codex, or any coding agent that supports skills.
Is this a plugin for my coding agent, or a full animation app?It is an agent skill plus a small player workspace: the skill teaches your coding agent how to build Lottie JSON, and the included player live-previews the scenes the agent generates in public/projects/.
Which coding agents does it support?Claude Code and Codex are explicitly mentioned, but the skill works with any coding agent that supports the skills format, since that is its only real requirement.
Do I get full control over the animation out of the box?Not by default — generated animations usually only expose a background-color control, so you have to explicitly ask the agent to add controls for any other property you want to tweak.
Where can I use the Lottie files it generates?The output is standard Lottie JSON usable directly on web/vanilla HTML, in React Native via the Skottie module, natively in iOS Swift and Android Kotlin, in Flutter, or re-imported into After Effects for further editing.
How do I get better results from the agent?Ground prompts with real SVGs, screenshots, or data, use motion-design vocabulary like ease-in/ease-out, think in camera terms such as pushes, pans, and zooms, and specify the FPS and duration explicitly.
Can I edit the generated animation in After Effects?Yes, the generated Lottie JSON files can be imported directly into After Effects for further refinement.
Does the React Native output need anything extra to play?Playback there relies on React Native Skia's Skottie module, which renders Lottie across iOS, Android, and web and lets you customize properties, assets, and typography at runtime.
What are similar projects?guizang-product-video-skill, lottie-web, herk-edit-kit, skills, livecanvas, onetake, skills, hairline
Which topics is it in?svg-animation, motion-design, shadcn, motion-graphics, flutter, react-native, agent-skill, svg, tailwindcss, vite, wasm, design
Creator
diffusionstudio
Size
4.9 MB
Stars
5.6K
Updated
CommitJul 25Releasev1.0.0Jun 15
Age
4mo
Commits · 90 Days