Stack Picker
a developer-grade decision engine
Back to the picker
Styling / UI & Animation

Lottie (lottie-react)

Play After Effects animations exported as JSON — great for onboarding, empty states, hero illustrations.

Official site
Monthly cost
Free
Popularity
3/5
LLM knowledge
4/5
Difficulty
Easy
bundle: ~80kb
#open-source

What Lottie (lottie-react) is good at

Strengths
  • +Designer-authored animations
  • +Scales crisply
  • +Tiny JSON payloads
Tradeoffs
  • Renderer is ~80kb
  • Not for app UI micro-interactions

Coding-agent prompt

You're working with Lottie (lottie-react). Play After Effects animations exported as JSON — great for onboarding, empty states, hero illustrations.

Best practices:
- Lean on: designer-authored animations
- Lean on: scales crisply
- Lean on: tiny json payloads

Things to watch for:
- Watch out for: renderer is ~80kb
- Watch out for: not for app ui micro-interactions

General guidance:
- Canonical docs: https://airbnb.io/lottie — check here before inventing APIs.
- Keep secrets in environment variables, never commit them.
- Write TypeScript where the ecosystem supports it; add types to every exported function.
- Add tests for the critical paths before declaring the task done.
- Read-the-docs is usually faster than guessing — cite the docs page in code comments when you apply a non-obvious pattern.

Popular pairings with Lottie (lottie-react)

Browse all categories