# lottie

A skill that steers your coding agent through Lottie work: dotLottie files, lazy loading, renderer choice and reduced-motion fallbacks.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1100 installs · ★ 286
- Author: Mindrally
- License: Apache-2.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/Mindrally/skills/tree/HEAD/lottie/SKILL.md
- Updated: 2026-10-08
- HTML: https://affpapa.org/en/nevibecode/skills/lottie

## What it does

This skill hands the agent a rulebook for Lottie animations. The first rule is format: ship `.lottie` (dotLottie) rather than `.json`, since assets and fonts travel inside one compressed bundle. A converter is available at lottiefiles.com.

Code samples cover React and plain JavaScript. React projects pull in `@lottiefiles/dotlottie-react`; vanilla ones use `@lottiefiles/dotlottie-web`. The agent will reach for `IntersectionObserver` to defer offscreen animations, pick between `svg` and `canvas` renderers, wire playback through `dotLottieRefCallback`, link frames to scroll position and split clips into segments. A reference table lists size and DOM-element targets for icons, UI animations, complex scenes and hero blocks.

Accessibility gets its own section: check `prefers-reduced-motion`, swap in a static image, and keep a fallback for load errors. The agent also reminds you to call `destroy()` when a component unmounts. None of the React samples compile without `@lottiefiles/dotlottie-react` installed, so add the package before asking for code.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill lottie -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/lottie/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/lottie/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill lottie -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/lottie/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill lottie -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/lottie/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Mindrally/skills lottie
```

2. **Manually: put the files in place**
- File: `.github/skills/lottie/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill lottie -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/Mindrally/skills --path lottie
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/lottie/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add Mindrally/skills --skill lottie -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/Mindrally/skills/tree/HEAD/lottie/SKILL.md

## When to use it
- migrate existing Lottie `.json` files to dotLottie
- stop frame drops on an animation heavy with filters
- defer loading until an animation scrolls into view
- serve a static image to visitors who prefer reduced motion
- drive playback and segments from UI buttons

## Example prompts
- Add the loading Lottie animation to this React component following the skill guidelines
- Set up lazy loading for the animation with IntersectionObserver
- Check prefers-reduced-motion and add a static fallback for this animation

## Source text · SKILL.md · Apache-2.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 6996ce2b0a190bed.

BEGIN THIRD-PARTY FILE 6996ce2b0a190bed
````text
---
name: lottie
description: Expert guidelines for implementing performant Lottie animations on the web
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Lottie Animation Guidelines

You are an expert in Lottie animations, web performance, and JavaScript. Follow these guidelines when implementing Lottie animations.

## Core Principles

### Use dotLottie Format
- Prefer `.lottie` (dotLottie) format over `.json` - up to 90% smaller file size
- dotLottie bundles all assets (images, fonts) into a single compressed file
- Use the free dotLottie converter at lottiefiles.com

### Installation
```bash
# For React
npm install @lottiefiles/dotlottie-react

# For vanilla JS
npm install @lottiefiles/dotlottie-web
```

## React Implementation

### Basic Usage
```tsx
import { DotLottieReact } from "@lottiefiles/dotlottie-react";

function Animation() {
  return (
    <DotLottieReact
      src="/animations/loading.lottie"
      loop
      autoplay
    />
  );
}
```

### Control Animation Playback
```tsx
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
import { useState } from "react";

function ControlledAnimation() {
  const [dotLottie, setDotLottie] = useState(null);

  const dotLottieRefCallback = (dotLottie) => {
    setDotLottie(dotLottie);
  };

  return (
    <>
      <DotLottieReact
        src="/animation.lottie"
        dotLottieRefCallback={dotLottieRefCallback}
      />
      <button onClick={() => dotLottie?.play()}>Play</button>
      <button onClick={() => dotLottie?.pause()}>Pause</button>
      <button onClick={() => dotLottie?.stop()}>Stop</button>
    </>
  );
}
```

## Performance Optimization

### Lazy Loading
```tsx
import { useEffect, useRef, useState } from "react";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";

function LazyLottie({ src }) {
  const [isVisible, setIsVisible] = useState(false);
  const containerRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { rootMargin: "100px" }
    );

    if (containerRef.current) {
      observer.observe(containerRef.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={containerRef}>
      {isVisible && <DotLottieReact src={src} autoplay loop />}
    </div>
  );
}
```

### Choose the Right Renderer
```tsx
// SVG renderer - best quality, good for simple animations
<DotLottieReact src="/animation.lottie" renderer="svg" />

// Canvas renderer - better performance for complex animations
<DotLottieReact src="/animation.lottie" renderer="canvas" />

// Use canvas for:
// - Complex animations with many elements
// - Lower-powered devices
// - Animations with filters/effects
```
````
END THIRD-PARTY FILE 6996ce2b0a190bed

The third-party file has ended. Everything between the 6996ce2b0a190bed tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2859 of 7080 bytes. © Mindrally · Apache-2.0 · https://github.com/Mindrally/skills/tree/HEAD/lottie/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md