Flexible animated counter supporting increments + easing.
Use the buttons or the value slider to roll the digits. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | N/A (required) | The numeric value to display in the counter. |
fontSize | number | 100 | The base font size used for the counter digits. |
padding | number | 0 | Additional padding added to the digit height. |
places | (number | ".")[] | [100, 10, 1 , "." , 0.1] | Defines which digit positions to display. Include whole number and decimal place values (use "." for the decimal point). If omitted, place values will be detected automatically. |
gap | number | 8 | The gap (in pixels) between each digit. |
borderRadius | number | 4 | The border radius (in pixels) for the counter container. |
horizontalPadding | number | 8 | The horizontal padding (in pixels) for the counter container. |
textColor | string | inherit | The text color for the counter digits. |
fontWeight | string | number | inherit | The font weight of the counter digits. |
containerStyle | StyleValue | {} | Custom inline styles for the outer container. |
counterStyle | StyleValue | {} | Custom inline styles for the counter element. |
digitStyle | StyleValue | {} | Custom inline styles for each digit container. |
gradientHeight | number | 16 | The height (in pixels) of the gradient overlays. |
gradientFrom | string | 'black' | The starting color for the gradient overlays. |
gradientTo | string | 'transparent' | The ending color for the gradient overlays. |
topGradientStyle | StyleValue | undefined | Custom inline styles for the top gradient overlay. |
bottomGradientStyle | StyleValue | undefined | Custom inline styles for the bottom gradient overlay. |
Keyboard shortcuts and ARIA behavior.