
Styling / UI & Animation
Lottie (lottie-react)
Play After Effects animations exported as JSON — great for onboarding, empty states, hero illustrations.
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
Drop into Claude / Cursor to get idiomatic Lottie (lottie-react) code.
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