Lottie Studio

Describe the motion — production-ready Lottie JSON, previewed live, out.

Back to SkillSafe
Free, replayed from saved runs:

The stage is empty.

Describe an animation and generate it, replay a free example — or drop a Lottie .json right here to preview and lint it for free. Files are read locally; nothing uploads.

0/0 · 0.00s
How it works

Nothing to brief yet? Replay the (a transparent state-feedback icon) or the (a full-frame chart with a count) — both are saved runs that replay for free. Or drop any Lottie .json onto the stage: the free inspector previews it and explains exactly what a web renderer will strip or break.

1

Brief it — or drop a file in free

Write the brief the way you would to a motion designer, and paste in whatever is concrete: SVG path data, brand hex values, the actual headline, the real numbers. Set the canvas, frame rate and background. Anything you drop into the studio instead — an existing Lottie export — is parsed, previewed and linted entirely in your browser: expressions, layer effects, image assets, font files and keyframe order are checked against what web renderers actually support, before anything is metered.

2

The AI authors real Lottie — the metered part

The model writes the JSON the way a motion designer would build it: staged beats with anticipation and settle, easing chosen per behavior rather than one curve everywhere, staggers from a meaningful origin, seamless loop seams, and restraint by default — no decorative chrome. The result streams onto the stage, and a delivery check verifies the canvas, frame rate, duration and background against what you asked, then re-runs the same lint the free lane uses. A worst-case amount is reserved before the run and only what it actually uses is charged — the meter next to the button shows both.

3

Scrub, refine, ship

Scrub the timeline, step frames, flip the stage between checkerboard and solid backgrounds. Not right yet? Say so in plain words — “softer settle, hold the end longer” — and the refine lane edits the loaded JSON surgically. Then export: pretty or minified JSON, a PNG of any frame, a self-hosted embed snippet, or a Markdown report. Past animations are saved to your SkillSafe account and searchable by meaning, so last month's loader is one query away on any device.

A derived work of diffusionstudio/lottie (text-to-lottie, MIT), the open-source framework for generating production-ready Lottie animations with coding agents. Preview rendering by lottie-web (MIT), vendored.