lottie

Add and manage Lottie animations in React using LottieFiles.

4|6|Updated Jan 22, 2026
One-click install
npx skills add https://github.com/BasedHardware/omi-landing --skill lottie
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: lottie
Source: https://github.com/BasedHardware/omi-landing/tree/main/.claude/skills/lottie
Command: npx skills add https://github.com/BasedHardware/omi-landing --skill lottie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Adds and manages Lottie animations on the website using LottieFiles to deliver lightweight, scalable motion graphics without heavy custom animation work.

Core Features & Use Cases

  • Reusable Lottie component: Wraps DotLottieReact to render JSON/.lottie animations in React components.
  • Framer Motion integration: Combine Lottie with Framer Motion for scroll-triggered and interactive animations.
  • Asset flexibility: Supports local and remote Lottie files (JSON/.lottie) and simple usage across pages.
  • Use Case: Add a loading indicator or success check animation in a SaaS dashboard to improve user feedback.

Quick Start

Install the LottieFiles React package and create a reusable Lottie component, then render with a src pointing to your animation.

Frequently Asked Questions about lottie

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Lottie animations to a React website?

To add Lottie animations to a React website, use a reusable Lottie component wrapping the DotLottieReact package to render local or remote JSON and .lottie files without heavy custom animation work.

What is the best way to use LottieFiles for lightweight motion graphics in a SaaS dashboard?

The best way to use LottieFiles for lightweight motion graphics in a SaaS dashboard is implementing a reusable DotLottieReact component to display functional animations like loading spinners or success checks.

Can I integrate Lottie animations with Framer Motion for scroll-triggered effects?

Yes, you can integrate Lottie animations with Framer Motion. The reusable Lottie component supports optional Framer Motion integration to create scroll-triggered and interactive animations in your React frontend.

Do I need a specific package to render .lottie files in my React frontend project?

Yes, you need the @lottiefiles/dotlottie-react package and a minimal React setup to render .lottie files. This dependency provides the scalable motion graphics rendering for your website.

Does the Lottie React component support both local and remote animation assets?

Yes, the Lottie React component supports asset flexibility for both local and remote Lottie files. You can point the component source to your animation file regardless of its hosted location.