https://framer.com/m/CounterPro-H0sG.js
Io / Enhancements / CounterPro
CounterPro
CounterPro animates a number up to its target with odometer-style digits, number formatting, and optional glow or motion blur.
Examples
Live specimens for every control the component exposes.
Default
from and to set the range. The count runs once the component scrolls into view, so a stat block animates when the reader reaches it.
Number formatting
Separator, decimals, prefix and suffix are formatting only — the animation still runs on the raw number.
thousand separator
two decimals
prefix and suffix
Motion
duration sets how long the count takes; delay holds it before starting. Both are seconds.
duration 1s
duration 4s
delay 1.2s
Glow, blur and spacing
Glow and motion blur are effects on the digits. spacing widens the gap between digit columns.
glow on
motion blur
digit spacing
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for CounterPro
A metric, stat or KPI should count up when it enters the viewport.
Large numbers need a thousand separator, currency prefix or unit suffix.
The digits should read as one steady odometer rather than a text swap.
The count needs to stay on the theme type scale and colour tokens.
Reach for something else
The number changes from live data after mount — this counts once on view.
You need a progress indicator rather than a number — use Slider or a bar.
The value is plain static text with no animation — use TextPro.
Io — Enhancements
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.