Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Animated infographic with sequenced reveal v1.0.0

Use this resource to create an animated infographic as a video

New

  • 509 downloads
  • 234 likes
  • 246 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install animated-infographic-reveal

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent designs the static layout first, then sets the reveal order by hierarchy: title, icon, key number, label, connector. It animates with a constant stagger, bouncing icons, eased counters and drawn-on lines using Remotion. You get an MP4 and a project you can re-render with new numbers.

Mostly picked by

Updated November 2, 2026

Three-step infographic with icons, key numbers and connectors revealed one after another.

Details

Works in
Install guides
Generates with
Remotion
Uses
  • Node.js
  • Remotion
  • ffmpeg
Licence
MIT

Similar resources

View all
  • Free

    Video

    App window with zoom

    • 365365 downloads
    • 125125 likes
    • 188188 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • Free

    Video

    One big number

    • 463463 downloads
    • 223223 likes
    • 100100 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Three bars head to head

    • 348348 downloads
    • 133133 likes
    • 182182 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Before / after slider

    • 322322 downloads
    • 248248 likes
    • 238238 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Three-card carousel

    • 418418 downloads
    • 157157 likes
    • 101101 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Chat exchange

    • 564564 downloads
    • 127127 likes
    • 161161 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames
  • PRO

    Video

    Checklist ticking off

    • 442442 downloads
    • 233233 likes
    • 160160 saves
    Works with
    • Claude Code
    • Codex
    • Cursor
    • and 3 more
    + HyperFrames

What you get

  • SKILL.md: the infographic animation method
  • sequenced-infographic.md: a full Remotion scene for a 3-step how-it-works, with a dependency-free SVG variant
  • Time budgets per element and a still-frame verification loop

Good fit for

  • Explaining a process in 3 steps as a short video
  • Showing key numbers in a reel or a website video
  • Producing several versions of one infographic from different data

Not for

  • Animating a heavy data chart: use a chart animation skill
  • Making a static infographic with no animation

Tags

  • infographic
  • animation
  • remotion
  • video
  • motion design

About

You say

"Make a 45-second animated infographic: our offer in 3 steps, one key number per step."

Three-step infographic with icons, key numbers and connectors revealed one after another.

Skill published by iart-ai under the MIT license.

Show more

Prerequisites

You bring
The central message and the numbers or steps to show and Your colours and fonts if you have a brand guide
Dependencies
Node.js, Remotion, and ffmpeg

How to use it

  1. Give the central message and 3 to 5 data points or steps
  2. The agent composes the layout, renders stills and shows them to you
  3. Approve, then ask for the final MP4 encode

Content preview

Files

  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/sequenced-infographic.md12.8 KB
  • SKILL.md10.6 KB

Origin and licence

Modified by PalateKit

Author
iart-ai
Source
github.com/iart-ai/data-animation-skills/tree/8ce2709c3992490251e8a991535b1945f01c6865/skills/animated-infographic
Licence
MIT

Notice

Version modifiée de « animated-infographic » (iart-ai, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

What do I need to install?

Node.js and a Remotion project. The agent runs renders with `npx remotion` commands. The folder holds the method and an example scene.

Are the helper scripts included?

No. The skill mentions contact-sheet.sh and probe-mp4.sh and a neighbouring chart animation skill, but the method works without them. You can check the stills by eye.