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.

Diagram and chart animation v1.0.0

Use this resource to animate a diagram or chart to explain a structure or figures

New

  • 475 downloads
  • 202 likes
  • 140 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install diagram-chart-animation

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 reveals your diagram in the order nodes, links, labels, highlights the active element and makes data flow along connectors. It also animates bars, lines and counters, with a reduced-motion setting. You get a standalone HTML file, or a Remotion composition if the output is a video.

Mostly picked by

Updated November 2, 2026

A diagram of three linked nodes revealed one by one, with a chart bar growing.

Details

Works in
Install guides
Generates with
Your agent's model
Uses
  • Web browser
  • Playwright (optional, for check screenshots)
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md, translated into French: reveal principle, motion cheat sheet, SVG, CSS and JavaScript snippets, and checklist.
  • references/diagram-and-chart-recipes.md: full recipes for sequence and architecture diagrams and charts with D3, Framer Motion and Remotion.

Good fit for

  • You explain a process or architecture in a course or presentation.
  • You want a chart that builds itself for an online client report.
  • You are preparing a data-driven explainer video.

Not for

  • Creating the diagram from scratch without describing its content.
  • 3D animation or particle effects.

Tags

  • diagram
  • chart
  • svg animation
  • explainer
  • data

About

You say

"Animate this customer journey diagram: steps appear one by one, then the figures count up to their value."

A diagram of three linked nodes revealed one by one, with a chart bar growing.

Skill published by iart-ai under the MIT license.

Show more

Prerequisites

You bring
The diagram or structure to animate. and The exact figures to display.
Dependencies
Web browser and Playwright (optional, for check screenshots)

How to use it

  1. Describe or paste the diagram and the data to animate.
  2. The agent produces an HTML file with a single timeline.
  3. It freezes it at several moments to check order and figures.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/diagram-and-chart-recipes.md9.3 KB
  • SKILL.md8.4 KB

Origin and licence

Modified by PalateKit

Author
iart-ai
Source
github.com/iart-ai/explainer-video-skills/tree/3e2d411b725d9a72939cf8e5eb81579e751373e7/skills/diagram-animation
Licence
MIT

Notice

Version modifiée de « diagram-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

Are the helper scripts mentioned included?

No, they are optional and not shipped; checking uses the Playwright screenshot described in the skill.

Does the file work offline?

The example loads GSAP from a CDN; download the library if you want a fully offline file.