Code skill · free
Data-Chart Video
Labels and numbers in, an animated bar or line chart video out. Free, renders locally.
Download the skill
Install it in Claude Code, Codex, Cursor and run it on your own computer.
Download .zipInstall
- Download the .zip above and unzip it.
- Put the
data-chart-videofolder in your agent's skills folder, for example~/.claude/skills/data-chart-videofor Claude Code. - Ask your agent for the video. The skill's SKILL.md tells it what to collect and which script to run.
Inputs
Data (text)
1 to 12 labels with a number each (2 to 12 for a line). Tiny and huge numbers, and negatives, are fine.
Title, subtitle and source (text)
The title is required; the source line says where the numbers come from.
Chart type (choice, optional)
Bars grow one by one, or a line draws from point to point. Bars turn sideways when labels are long.
Units and highlight (text, optional)
A prefix such as $ and a suffix such as % for every number, and one label to light up.
Length in seconds (number, optional)
5 to 20 seconds; 8 by default.
Format (choice, optional)
Landscape 1920x1080, portrait 1080x1920 or square 1080x1080.
Made with
- Engine
- HyperFrames
- Output
- video
- Cost per run
- Free: renders on your computer
A number on a slide is easy to skip. The same number as a bar that grows while its value counts up holds the eye for the second it takes to land. That is why stats in Shorts, reports and explainers are so often animated.
This skill gives your coding agent that recipe. Give it the labels, the numbers and where they come from, and HyperFrames renders the chart to an MP4 on your machine.
What the clip looks like
- The title is on screen from the first frame, so the paused video already says what it is about.
- The gridlines come in, then each bar grows (or the line draws to each point) while its value counts up to the exact number you gave.
- The highlighted bar or point lights up, and the chart holds so the numbers can be read.
The sample above uses our own numbers: how long the sample videos on this site took to render.
How it works
- Download the skill and put it in your agent’s skills folder (the steps are above).
- Ask, for example: “Make a chart video of our monthly signups from signups.csv, highlight March, source: our dashboard.”
- The agent checks a few still frames, then renders the MP4.
The numbers come from you; the skill never rounds or changes them, it only formats them for reading.
Questions
- Is the data-chart video skill free?
- Yes. The skill is free to download and renders on your own computer with HyperFrames, so there is no API key and no cost per video.
- How are very big or very small numbers shown?
- Big numbers are shortened to K, M, B and T (12.4K, 2.5B), tiny ones keep two significant digits (0.00042), and the rest are written out. You can fix the number of decimals instead.
- Can it show negative values?
- Yes. Bars for negative values hang below a zero line, and the axis always includes zero for bar charts.
- What happens with long labels or a vertical video?
- Bars turn sideways, with the label above each bar, so long labels stay readable. In portrait they are always sideways.
- How long does a render take?
- Our eight-second 1080p sample rendered in about 27 seconds on a 4-core computer.