Discovered an animation generation tool that directly converts natural language into stunning Lottie animations. The effects shown in the video below can be generated in one go—it’s incredibly impressive. (The prompt guide is in the comments; you can feed it to AI to help write high-quality prompts for you.) Combining it with video production tools like HyperFrames opens up even more possibilities. Install it from the terminal with one command: $ npx skills add diffusionstudio/lottie Repository link: https://github.com/diffusionstudio/lottie

diffusionstudio/lottie

Source: https://github.com/diffusionstudio/lottie

Text-to-lottie is an open-source harness 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 will setup a harness that allows you to inspect/edit the generated lottie with the included player.

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. 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, 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

lottie.loadAnimation({
  container: document.getElementById("anim"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "/animations/my-animation.json"
});

React Native

import LottieView from "lottie-react-native";

export default function Loader() {
  return (
    <LottieView
      source={require("./animation.json")}
      autoPlay
      loop
    />
  );
}

Alternatively, React Native Skia (https://shopify.github.io/react-native-skia/docs/skottie/) can also render Lottie animations via its Skottie module, including on the web. It lets you customize animation properties, assets, and typographies at runtime, and since Skottie is a regular Skia drawing, it can be composed into a larger Skia scene alongside shaders, effects, and masks.

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={{ flex: 1 }}>
      <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(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')

Sac (@Saccc_c):
If you had bought $200,000 worth of Nvidia at its 2009 low, you’d be a billionaire today.
Used HyperFrames + Lottie skill to make this Nvidia stock price retrospective video.