Counter
An animated number counter with smooth rolling digits
Configuring your account...
Please wait while we prepare everything for you
Usage
import Counter from '@/components/bynanaui/counter';
export default function Demo() {
return (
<Counter
value={1234}
places={[1000, 100, 10, 1]}
fontSize={80}
padding={5}
gap={10}
textColor="#000000"
fontWeight={900}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | Required | The number to display |
fontSize | number | 100 | Font size in pixels |
padding | number | 0 | Padding around digits |
places | number[] | [100, 10, 1] | Digit places (e.g., hundreds, tens, ones) |
gap | number | 8 | Space between digits |
textColor | string | '#000000' | Color of the digits |
fontWeight | number | string | 900 | Font weight |
gradientFrom | string | '#ffffff' | Top gradient color |
gradientTo | string | 'transparent' | Bottom gradient color |
Features
- Smooth Animations: Spring physics for natural rolling
- Customizable Places: Show any number of digits
- Gradient Overlay: Subtle fade effect at top/bottom
- Black & White Theme: Clean, minimal design
- Tabular Numbers: Consistent digit width