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 data chart videos v1.0.0

Use this resource to turn data into an animated chart video

New

  • 542 downloads
  • 247 likes
  • 178 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install animated-chart-video

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 builds a frame-driven chart in Remotion: bars that change rank, eased values, formatted counters and annotations at the right moment. It checks the numbers on still frames before encoding, then can render one video per data file.

Mostly picked by

Updated November 2, 2026

No preview: generated card

Details

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

Similar resources

View all

What you get

  • SKILL.md: golden rule, scales, pacing, labels, verification
  • bar-chart-race.md: complete Remotion bar chart race component
  • data-pipeline.md: CSV to props parsing and batch render script

Good fit for

  • A bar chart race from a yearly table
  • An animated counter or key figure for a report
  • One chart video template applied to 20 datasets

Not for

  • Interactive web charts
  • Videos without numerical data

Tags

  • animated chart
  • data
  • bar chart race
  • remotion
  • counter

About

You say

"Make a bar chart race from sales.csv, with the year shown and a 3-second final hold."

No preview: generated card

Skill published by iart-ai under the MIT license.

Show more

Prerequisites

You bring
A CSV or JSON data file and Your colors and font
Dependencies
Node.js and Remotion

How to use it

  1. Copy the skill folder into your agent's skills folder.
  2. Provide your CSV or JSON and describe the columns.
  3. Check the stills (start, middle, end), then run the encode.

Content preview

Files

  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0 KB
  • references/bar-chart-race.md7.7 KB
  • references/data-pipeline.md7.5 KB
  • SKILL.md10.4 KB

Origin and licence

Modified by PalateKit

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

Notice

Version modifiée de « chart-animation » (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

Can I trust the numbers?

Every value is computed from the frame and formatted with Intl.NumberFormat; the skill requires checking stills before encoding.

Can numbers be shown in French format?

Yes, replace the "en-US" locale with "fr-FR" in the formatting.