Text
Counter
Numbers that spring to their value with a whisper of overshoot — on scroll and whenever they change.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Counter } from '@vizzele/react';
<Counter value={48200} suffix=" stars" />
<Counter value={revenue} format={{ style: 'currency', currency: 'USD' }} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Target; changes animate. |
from | number | 0 | Start value. |
decimals | number | 0 | Fraction digits. |
format | Intl.NumberFormatOptions | — | Currency, compact, percent… |
prefix / suffix | string | — | Text around the number. |
spring | SpringConfig | SpringPreset | { stiffness: 60, damping: 16 } | Feel. |
inView | boolean | true | Wait until visible to start. |
Accessibility
- aria-label always holds the final value. Tabular figures keep the width steady.