Three typical Lottie patterns: success check, continuous loader, and loading dots — each generated in a few seconds from a prompt.
🎯 What Lottie is and why it’s different
Lottie is an animation library based on Descriptive JSON — the format captures vectors, colors, and animation curves compactly. Unlike Three.js or GSAP, its scope is intentionally small: clean, lightweight animations made to repeat.
✗ Where Lottie isn't the right choice
- ✗3D scenes with real perspective and lighting.
- ✗Long choreographies with multiple synchronized elements.
- ✗Data animations (graphs, complex charts).
✓ Where Lottie excels
- ✓Brand micro-animations: checkmarks, loaders, looping icons.
- ✓App onboarding: an illustration that animates to explain a step.
- ✓Quick social clips where clean and precise matter more than elaborate.
⚡ Why Claude gets it right faster
The secret to using Lottie with Claude: a small scope means the model there's no room to complicate things. The output is almost always production-ready on the first try — clean, correct, and usable.
Defined scope
A micro-animation has a clear beginning, middle, and end. Claude doesn't need to infer the choreography — the problem is small enough for it to solve reliably.
No architecture decisions
There’s no 3D scene, WebGL pipeline, or React reconciler to manage. The model writes SVG + keyframes or JSON Lottie directly—minimal chance of error.
Huge community library
Find a Lottie animation close to what you want, describe it to Claude, and ask it to recreate it in the Remotion composition. The pattern already exists; the model reconstructs it faithfully.
💡 Workflow tip
Search in the LottieFiles.com something close to what you want. Describe what you saw to Claude ("a looping, vector heart icon animation that pulses, with a transparent background") — a description based on a real reference greatly improves the output.
🛒 The Lottie quality test
The defining test: ask Claude for a "barcode scanning animation at the checkout of a convenience store". The expected output is clean, correct, and usable on the first response — no iteration.
Crie uma animação Lottie-style para Remotion: - Scanner de código de barras num caixa de loja - Linha de scan vermelho varrendo de cima a baixo - Ícone do código de barras em vetorial simples - Loop contínuo, fundo transparente - Clean, sem elementos desnecessários
A red line scanning the barcode — exactly what you get from a single Lottie-style prompt.
📱 Use Cases: Social, Onboarding, Brand
Lottie shines in three contexts: social clips that need clean, fast motion, app onboarding where illustrations animate to guide the user, and brand micro-content with a consistent visual identity.
Social clips
Clean motion, a perfect loop, no distractions. The kind of animation that works on Reels and Stories without looking "tool-made".
App onboarding
Illustrations that move to explain a UI step. Lightweight, fast-loading, and precisely animated — the mobile industry standard.
Brand micro-content
Animated icons, branded loading screens, action confirmations. Small touches that bring the visual identity to life.
🔷 Lottie vs. pure CSS animation
For micro-animations inside Remotion, Lottie and CSS @keyframes are interchangeable. The difference is that Lottie is reusable outside Remotion (web, mobile, apps), while CSS @keyframes is contained in the composition.
🗺️ The prompt→Lottie→Remotion workflow
The Lottie workflow in Remotion is linear and fast. You describe the animation, Claude generates the JSON or animated SVG, you include it in the Remotion composition and render—three steps, no back-and-forth.
💡 When to iterate
Lottie rarely needs iteration, but when it does, it’s quick. Because the scope is small, follow-up changes are precise: “increase the loader radius” or “change the checkmark color to green” — one line per adjustment.
📐 Anatomy of a Good Lottie Prompt
Quality Lottie prompts have four ingredients: the object being animated, the movement in physical terms, the usage context e the loop instruction. With these four, Claude delivers on the first try.
✗ Incomplete prompt
- ✗"Make a heart animation." — no usage context, no loop.
- ✗"Animate this icon." — without physically describing the movement.
- ✗Without mentioning a transparent background when needed.
✓ Complete prompt
- ✓"Pulsing heart icon — scale 1→1.2→1 — 1s loop."
- ✓"Transparent background, flat vector style, color #ef4444."
- ✓"For a social clip — clean, no borders or shadows."
🔷 Lottie is the right shortcut when…
You need a quick result, the animation is simple and clean, the context is social / mobile / onboarding, or you want something that also works outside Remotion. In other cases, GSAP, D3, or Three.js deliver more.
📌 Module summary
Next module:
2.6 — Decision map: which library to use for each type of motion.