# animated-infographic

Lays out a static infographic of icons, numbers and labels, then reveals the elements in sequence. Built for explainer videos.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1300 installs · ★ 15
- Author: iart-ai
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/iart-ai/data-animation-skills/tree/HEAD/skills/animated-infographic/SKILL.md
- Updated: 2026-06-22
- HTML: https://affpapa.org/en/nevibecode/skills/animated-infographic

## What it does

The skill holds the agent to one rule: design the static frame first, with every icon, number and label already in its final position, and only then add keyframes. Animation decides when an element appears, never where it lands. That kills the usual failure where elements fly to positions nobody designed and the held frame looks accidental.

Reveal order follows hierarchy rather than layout: title, then icon, then the number counter, then the label, then the connector line. Siblings cascade on a 6–10 frame stagger, icons enter through a spring with overshoot, numbers interpolate with ease-out and get rounded before formatting. The code leans on `remotion` — `useCurrentFrame`, `spring`, `interpolate`, `Easing` — so renders stay deterministic.

Scope is tight on purpose: one central insight, 3–5 data points, 30–90s. Past five competing elements the cascade reads as noise. For charts that are the content itself — bar chart race, animated lines from a CSV — the author points to the `chart-animation` skill, and suggests composing such a chart as a single block inside the infographic.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/data-animation-skills --skill animated-infographic -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/data-animation-skills --skill animated-infographic -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/data-animation-skills --skill animated-infographic -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install iart-ai/data-animation-skills animated-infographic
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/data-animation-skills --skill animated-infographic -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/iart-ai/data-animation-skills --path skills/animated-infographic
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add iart-ai/data-animation-skills --skill animated-infographic -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/iart-ai/data-animation-skills/tree/HEAD/skills/animated-infographic/SKILL.md

## When to use it
- build an explainer video of icons and numbers
- lay out stat cards so the final frame reads on its own
- run a key-number counter that settles smoothly
- draw a connector line between process steps
- reveal a pictogram unit by unit, like 7 of 10

## Example prompts
- make an animated infographic: three onboarding steps with icons and counters
- build a by-the-numbers infographic with a staggered card reveal
- animate the pictogram and key number, link the steps with connectors

## Source text · SKILL.md · MIT

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: 11607472306756c2.

BEGIN THIRD-PARTY FILE 11607472306756c2
```text
---
name: animated-infographic
description: This skill should be used when the user asks to "make an animated infographic", "create an infographic video", "build an infographic animation", "animate an explainer infographic", "do a sequenced reveal of icons and stats", "animate icons with key numbers and connectors", or "lay out a designed infographic that animates in sequence". Covers infographic layout & visual hierarchy, staggered element reveals, animating icons/pictograms, key-number counters, connectors/flow, and section pacing. For heavy charting (bar chart race, charts from a CSV) use the chart-animation skill instead.
version: 0.1.0
---

# Animated Infographic

Build a *designed* infographic — icons, a few key numbers, short text, and simple shapes arranged with real visual hierarchy — then animate it in sequence so each element earns its moment. The craft is composition first, choreography second: a static layout that reads on its own, revealed in a staggered cascade that guides the eye exactly where you want it.

## When to use

- Mixed-layout explainers: "X in 3 steps", "how it works", "by the numbers", a stat-card grid.
- Sequenced reveal of icon + stat + label + connector as a single designed scene.
- Pictogram/icon animation, count-up key numbers, flow connectors between steps.

This skill owns the **composed infographic**. For a chart that *is* the content (bar chart race, animated line/area, a graph driven by a CSV), use **chart-animation** — and compose its chart as one block inside an infographic here rather than rebuilding it.

## The one rule: design the static frame first

A great animated infographic is a great *static* infographic that happens to move. Lay out and balance the full composition — every icon, number, and label in its final position — before adding a single keyframe. Animation then only controls *when* each already-placed element appears; it never decides layout. This prevents the most common failure: elements that fly to positions that were never designed, so the final held frame looks accidental.

Scope tightly: one central insight, **3–5 supporting data points**, in 30–90s. More than five competing elements and the cascade reads as chaos.

## Visual hierarchy → reveal order

Reveal order *is* the hierarchy. The eye follows appearance, so animate elements in importance order, not layout order. Map each element to a tier, then reveal tier by tier.

| Tier | Element | Reveal | Motion |
|---|---|---|---|
```
END THIRD-PARTY FILE 11607472306756c2

The third-party file has ended. Everything between the 11607472306756c2 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 2498 of 10710 bytes. © iart-ai · MIT · https://github.com/iart-ai/data-animation-skills/tree/HEAD/skills/animated-infographic/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