
Rendered by this Skill
Progress Stat Card v1.0.0
A big statistic counts up next to a label, a thin progress track fills to the value and a caption fades in.
- Format
- Video · 16:9
- Length
- 0:07
Free Free with an account
Paste this into your agent. It connects the CLI if needed, then installs the Skill.
A free HyperFrames block for a 7-second stat moment. A large numeral counts up to your value with a suffix such as %, a label sits beside it, a thin accent track fills to value over maximum and a short caption appears below. The value, suffix, maximum, label, caption and colours are set in a small configuration in the HTML; the background is transparent.
Updated Nov 3, 2026
What you get
- A 7-second 1920×1080 stat with a transparent background
- A count-up numeral, a label, a progress track and a caption
- A small configuration block for the values
Good fit
- Survey and review results
- Milestones and goals
- Product claims with a number
Not for
- Several numbers at once
- Numbers without context
About this Skill
/mk-progress-stat Make a progress stat: 94% "Would wear it again", caption "Maison Vey Ambre Nuit, blind test of 200 people", over our perfume shot.
One strong number can carry a whole ad. Progress Stat Card counts it up, shows how close it is to the maximum and gives it a label and a caption, clean enough to sit over a product shot.
How it works
- Ask: tell your agent the number, its suffix and maximum, a short label and a caption.
- 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
- Pick a number with a clear meaning, like 94% would buy again.
- Keep the label to three or four words.
- The background is transparent, so render it with an alpha channel and lay it over your own footage, photo or a plain colour; the SKILL.md shows the two commands.
- Use real figures you can back up.
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
- A number, its maximum, a short label and a caption.
- 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
Can the number be something other than a percentage?
Yes. Set the suffix to K, x or nothing and the maximum to match.
Can it go on a plain background?
Yes. It has light and dark text styles for boards or footage.
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, Maison Vey.






