Every Premium video Skill, one plan. Cancel anytime.See plans
Maison Vey · 16:9

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.

No ratings yet 0 downloads
Format
Video · 16:9
Length
0:07

Free Free with an account

Sign in to download

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

You say

/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

  1. Ask: tell your agent the number, its suffix and maximum, a short label and a caption.
  2. Fill: it writes your copy and colours into the block's variables, keeping text close to the length the layout was made for.
  3. Render: it renders a draft with npx hyperframes render, checks a few frames and renders the final MP4.
  4. 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.

Guides

How to make a money counter animation for a sales milestoneA number that counts up and explodes in green is the most direct way to celebrate a result. How to make one with sound, free, with the Money Counter block.How to make an animated statistic for an adOne strong number can carry an ad. How to count it up with a label, progress track and caption, free, with the Progress Stat Card block.

Similar Skills

View all