127 Components
Kinetic Rolling Counter
TextMechanical odometer numeric ticker where each digit column spins independently along a vertical 0-9 reel using Hooke's Law springs.
Current value: 1248
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/kinetic-rolling-counter.json"
Props
TypeScript props supported by <KineticRollingCounter />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number | 1248 | Initial non-negative integer displayed on the odometer. |
| step | number | 17 | Amount added or subtracted per stepper click. |
| stiffness | number | 340 | Hooke's Law spring stiffness for vertical digit reel travel. |
| damping | number | 26 | Spring damping coefficient controlling reel settle bounce. |
Key Features
- Independent 0–9 vertical digit reels that roll proportionally to the numeric delta in each place value.
- Tabular monospace geometry preventing horizontal layout jitter during high-speed increments.
- Screen-reader live status region paired with aria-hidden visual reels.
Keyboard & Accessibility
- Provides an sr-only role='status' live region announcing the complete number cleanly.
- Marks the 0–9 vertical reel strips with aria-hidden='true' to prevent screen readers from reading all 10 digits per column.
- Snaps digit reels immediately without vertical travel when prefers-reduced-motion is active.