Free
Ember & Bun · 16:9
Rendered by this Skill
Bar Chart Race v1.0.0
Ranked bars grow and overtake each other as the months tick by, with the axis rescaling as the numbers climb.
No ratings yet 0 downloads
- Format
- Video · 16:9
- Length
- 0:12
Free Free with an account
Paste this into your agent. It connects the CLI if needed, then installs the Skill.
A free HyperFrames block that turns a small table into a bar chart race. Paste your periods and series as plain text; the bars grow, re-rank and overtake each other period by period, values count up beside them and the axis rescales as they climb. Title, subtitle, data, bar count, speed, number format and accent are variables.
Updated Nov 3, 2026
What you get
- A 1920×1080 MP4 chart race, 2 seconds per period by default
- Overtakes, count-up labels and an auto-scaling axis
- Data entered as plain text, no spreadsheet tools
Good fit
- Sales, growth and ranking stories
- Year-in-review and milestone posts
- Data journalism and class explainers
Not for
- Dozens of series or very long time ranges
- Exact figures people need to read slowly
About this Skill
You say
/bar-chart-race Make a bar chart race titled "Ember & Bun: burgers sold by month" from June to November, values in thousands: Double Stack 12, 18, 26, 35, 47, 61; Classic Cheese 22, 25, 28, 30, 32, 33; and four more menu items. Accent orange.
Rankings that change over time are a story, and a bar chart race tells it in seconds. Give Bar Chart Race a few periods and a few series as plain text; it animates the climb, the overtakes and the leader, with clean editorial typography and one accent colour on the bar in front.
How it works
- Ask: tell your agent the title, the periods and the values for each series as plain text, plus the units.
- Fill: it writes your copy and colours into the block's variables, keeping text close to the length the layout was made for.
- Render: it renders a draft with
npx hyperframes render, checks a few frames and renders the final MP4. - Reuse: the variables live in one small JSON file, so the next version is one more render.
Tips
- Four to eight series and four to eight periods read best.
- Pick the accent for the item you want viewers to watch.
- Use the prefix and suffix for units such as $, k or %.
- Raise the period duration for a calmer, more readable race.
Open source
This is a block from the HyperFrames registry, made by HeyGen and the HyperFrames contributors (heygen-com/hyperframes) and shared under the Apache License 2.0. The download is the block with its assets and a SKILL.md written by Reelity, so your agent knows how to fill and render it; HyperFrames itself runs from npm.
What you need before you start
- You bring
- Your periods and the values for each series, a title and the units.
- Dependencies
- Node.js 22 or newer — required · FFmpeg — required
- Outside costs
- None. HyperFrames is free and open source and renders on your own machine.
- Last tested
- v1.0.0 —
User reviews
No reviews yet. Install the Skill and be the first to rate it.
FAQ
What format does the data use?
One line per series: the name, a colon and the values separated by commas, in the same order as the periods. Your agent can turn a spreadsheet into this for you.
How long is the video?
Two seconds per period by default, so six periods make about 12 seconds. The period duration is a variable.
Why is it free?
It is an open-source HyperFrames block by HeyGen and the HyperFrames contributors. We list it as it is, with a SKILL.md so your agent can use it and a sample made with one of our house brands, Ember & Bun.
