Lottie / dotLottie

JSON vector animation format playable everywhere.

MIT · ★ 32.1k

How people build with Lottie / dotLottie

Works where the prompt, the code or the video is public. Videos load from the creator's own host when you press play.

SF Hello path reveal (text-to-lottie example)

by Diffusion Studio · MIT · AI-made

README example prompt for the text-to-lottie skill; the bundled sample scene and demo GIF may not correspond exactly to this prompt.

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.

加载动画

by OpenVGLab · MIT · AI-made

加载动画 — generated with claude-opus-5.5; public prompt, source.

Prompt
三个彩色圆点依次弹跳,然后变形为一个旋转的圆环,再散开回到三个圆点。交付一个 Lottie JSON(Bodymovin 5.7 格式,能被 lottie-web 5.13 的 SVG 渲染器正常播放):画布 512×512,60 fps,2–4 秒无缝循环;只用形状图层(不用图片、字体、文字图层,不用表达式);文件不超过 120 KB;配色明快、动作有缓动和弹性,不要生硬的线性运动。

天气图标

by OpenVGLab · MIT · AI-made

天气图标 — generated with claude-opus-5.5; public prompt, source.

Prompt
太阳被飘来的云遮住,开始下雨,雨停后云散去、太阳重新出现。交付一个 Lottie JSON(Bodymovin 5.7 格式,能被 lottie-web 5.13 的 SVG 渲染器正常播放):画布 512×512,60 fps,2–4 秒无缝循环;只用形状图层(不用图片、字体、文字图层,不用表达式);文件不超过 120 KB;配色明快、动作有缓动和弹性,不要生硬的线性运动。

点赞

by OpenVGLab · MIT · AI-made

点赞 — generated with claude-opus-5.5; public prompt, source.

Prompt
爱心从描边状态弹性放大并填充成红色,周围迸出一圈彩色粒子和小星星,然后回到初始状态。交付一个 Lottie JSON(Bodymovin 5.7 格式,能被 lottie-web 5.13 的 SVG 渲染器正常播放):画布 512×512,60 fps,2–4 秒无缝循环;只用形状图层(不用图片、字体、文字图层,不用表达式);文件不超过 120 KB;配色明快、动作有缓动和弹性,不要生硬的线性运动。
About Lottie / dotLottieagents, rendering, runtime
With agents
Diffusion Studio's open-source text-to-lottie skill (npx skills add diffusionstudio/lottie, ~5.5k stars) lets coding agents write Lottie JSON directly; LottieFiles publishes llms.txt for developers.
Render path
Play in any Lottie runtime; for MP4, render via @remotion/lottie or the HyperFrames Lottie adapter, or After Effects import.
Runtime
JSON format; JS/Rust-WASM/native runtimes
Best for
UI micro-animations · icons and loaders · app onboarding · transparent overlays

Worth knowing

  • lottie-web MIT ~32.1k stars (Airbnb) source ↗
  • Diffusion Studio text-to-lottie skill (MIT, ~5.5k stars) lets coding agents write Lottie JSON source ↗
  • LottieFiles publishes llms.txt source ↗

For the Lottie / dotLottie team

Featured on 24fps

This page is free and always will be. If it helps your users, drop the badge on your showcase or README.

<a href="https://24fps.dev/tools/lottie"><img src="https://24fps.dev/badge/lottie.svg" alt="Featured on 24fps" height="28"></a>