Sliding Number — primitive for stats & kpis (react)

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

An odometer number whose digits roll on little wheels up to their final value

Prompt that renders it frame-exact

Show a stat with Animate UI's Sliding Number (https://animate-ui.com/docs/primitives/animate-ui/sliding-number, MIT + Commons Clause): npm install @animate-ui/react motion, then <SlidingNumber number={12500} fromNumber={0} thousandSeparator="," /> at display size, centred or beside a label. Each digit sits on a wheel positioned in percent of its own height; with fromNumber it counts on a spring (stiffness 90, damping 50) and every digit rolls on the way. Motion's springs run on wall-clock time, so for the render compute the current value from the frame (Remotion: spring({ frame, fps, config: { stiffness: 90, damping: 50 } }) mapped from fromNumber to number) and place each wheel from that value; in HyperFrames tween a value in a paused GSAP timeline and write the digits on update. Set decimalPlaces and padStart as needed.

Used in

More stats & kpis