Big Stat Count-Up — effect skill for numbers & charts
For AI agents: find the right skill in one call —
curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>"returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add.mdto its path. Before generating anything, show the person the options on the how-to page.
One huge number counts from zero to its value and lands, with a short label under it.
- Type: Effect · Numbers & charts
- Slug:
big-stat-count-up - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/count-up
- Works in: Claude Code, Claude.ai, Codex, Cursor, OpenClaw, Gemini CLI, Any MCP client, varg Studio
- Requires: ffmpeg, HyperFrames (npx hyperframes), Remotion, CapCut (by hand)
- Cost: Free — the take renders locally; generated footage, if any, bills by the model
What it does
Built on Count Up by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
The number fills ~40% of frame width in tabular figures; a label ("teams", "faster") in a smaller weight beneath.
When: One proof stat per scene: users, speed, money saved.
Watch out: Do not put three stats on one card; a stat you want remembered deserves its own beat.
Timing: Count 0.8–1.5 s ease-out (expo.out), land with a 1.03 scale pop, hold ≥ 1.5 s.
Also called: number ticker, count up, hero stat
In FFmpeg
# counter with drawtext expression (0→10000 over 1.2 s)
-vf "drawtext=text='%{eif\:min(10000\,10000*t/1.2)\:d}':x=(w-tw)/2:y=(h-th)/2:fontsize=220:fontcolor=white"
In HyperFrames
npx hyperframes add count-up
Set data-variable-values='{"from":0,"to":10000,"suffix":"+"}'; use font-variant-numeric: tabular-nums so the width does not jitter.
In Remotion
const v = interpolate(frame,[0,36],[0,10000],{extrapolateRight:'clamp',easing:Easing.out(Easing.exp)});
<span style={{fontVariantNumeric:'tabular-nums'}}>{Math.round(v).toLocaleString()}+</span>
In CapCut
Text → Text templates → search "number"/"counter"; or Effects → "Number counter" where available; set end value.
Ready-made components
- Count Up (hyperframes): npx hyperframes add count-up
- Number Ticker (magic-ui): npx shadcn@latest add @magicui/number-ticker
- Count-Up Stat Card (hyperframes): npx hyperframes add mk-progress-stat
Where this comes from
- Piktochart: Apple keynote tips, one stat per slide
- Animation principles for data visualization
- Bohdan Motion: Secureframe launch video, one pain per scene
Use when
- One proof stat per scene: users, speed, money saved.
Not for
- Do not put three stats on one card; a stat you want remembered deserves its own beat.
Install
- Claude Code:
claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg - Codex:
npx skills add vargHQ/skills --skill varg-video-edit-library -a codex -y - Cursor:
npx skills add vargHQ/skills --skill varg-video-edit-library -a cursor -y
Example output
https://s3.varg.ai/how-to/previews/4d6433a0ad20/take-big-stat-count-up.mp4 — The Count Up component rendered as installed (npx hyperframes add count-up), defaults only (credit: Rendered by varg · HyperFrames Count Up, https://hyperframes.heygen.com/catalog/components/count-up)
More numbers & charts skills
- Odometer Digit Roll: Each digit rolls on its own wheel to the target, places settling right to left like an odometer.
- Bars Grow with Value Labels: Bars rise from the baseline in a staggered cascade with values riding their tops.
- Line Draws with Riding Label: A line draws itself left to right while the current value rides the pen tip, ending on a dot and big label.
- Ranked Bar Race: Ranked bars grow and overtake each other over time while the axis rescales and a year/date ticks.
- Progress Ring Fills: A thin ring draws on to a percentage while the number in its center counts up in sync.
- Before → After Metric: The old number shows, gets crossed or rolls, and the new better number takes its place.
Run the generation on varg
varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.
- Claude Code:
claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg(skill + hosted MCP) - Codex, Cursor, Gemini CLI, OpenClaw:
npx skills add vargHQ/skills --skill varg-ai -a <agent> -y - Grok and any agent that reads SKILL.md:
npx skills add vargHQ/skills --skill varg-ai, or point it at the skill's SKILL.md - Claude.ai, ChatGPT, any MCP client: connect
https://mcp.varg.ai/mcp - API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt