Before → After Metric — 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 .md to its path. Before generating anything, show the person the options on the how-to page.

The old number shows, gets crossed or rolls, and the new better number takes its place.

What it does

Built on Value Swap by Kapish Dima (remocn), MIT. The write-up and recipes below are varg's.

"12 months" in grey slides up and out; "2 weeks" rolls in bold accent; an arrow or delta chip ("−83%") pops beside it.

When: Outcome claims: time saved, cost cut, conversion lifted.

Watch out: Do not show the delta before the viewer has read the old value; give it ~1 s.

Timing: Old hold 0.8–1.2 s, swap 0.4–0.6 s, delta chip pop 0.2 s, hold 1.5 s.

Also called: value swap, metric change, from-to number

In HyperFrames

npx hyperframes add slot-machine-roll

Or strikethrough-replace when the old value should be crossed out.

In Remotion

// npx shadcn@latest add @remocn/value-swap
<ValueSwap from="12 months" to="2 weeks" at={30}/>

In CapCut

Two Text layers; old one Animation Out "Slide up", new one In "Slide up" at the same frame; add a delta chip sticker.

Ready-made components

Where this comes from

Use when

Not for

Install

Example output

https://s3.varg.ai/how-to/previews/4c97906d2cb8/take-before-after-metric.mp4 — The Slot Machine Roll component used as its header comment describes, with demo copy (credit: Rendered by varg · HyperFrames Slot Machine Roll, https://hyperframes.heygen.com/catalog/components/slot-machine-roll)

More numbers & charts skills

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.