TextNew
Number Ticker
A number smoothly counts up to its value when it scrolls into view. Made for stats sections.
Customize
gradientFrom
gradientTo
Based on Number Ticker (MIT license) · Terms of use
More in Pro
View allProps
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | number | 12480 | The number to count to. |
| startValue | number | 0 | The number to start from. |
| direction | 'up' | 'down' | "up" | Count up or down. |
| delay | number | 0 | Delay before start, in seconds. |
| decimalPlaces | number | 0 | Digits after the decimal point. |
| className | string | — | Tailwind classes for the wrapper. |
| gradientFrom | string | "#ffffff" | Colour at the left of the number. It fades into the second colour. |
| gradientTo | string | "#d4d4d8" | Colour at the right of the number. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge