127 Components
Rolling Number Ticker
TextWise and Robinhood-style vertical rolling cylinder odometer number ticker with independent digit strips, smooth Hooke's Law spring physics, customizable currency prefix, and decimal formatting.
High-Precision Odometer
Real-Time Yield Index
$,.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
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/rolling-number-ticker.json"
Props
TypeScript props supported by <RollingNumberTicker />.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 48932.18 | Numeric balance or metric value to display in the ticker. |
| currency | string | "$" | Currency symbol prefix prepended to the number ticker. |
| decimalPlaces | number | 2 | Number of decimal fraction digits to preserve and render. |
| stiffness | number | 260 | Spring stiffness for digit drum translation. |
| damping | number | 26 | Spring damping coefficient controlling digit settling oscillation. |
| className | string | — | Additional CSS classes to apply to the root container. |
| fontSize | number | — | Numeric font size in pixels for the rolling odometer digits |
Key Features
- Independent vertical digit drums rolling with customizable Framer Motion spring physics.
- Integrated currency prefix and decimal comma grouping formatting.
- Directional delta awareness flashing ambient emerald or rose glows on balance changes.
- Top and bottom cylindrical gradient mask styling for authentic mechanical odometer depth.
- Responsive typography with interactive step controls and randomized amount tests.
Keyboard & Accessibility
- Screen readers read the complete formatted numerical value via live aria announcement.
- Static delimiters (commas, periods, symbols) are excluded from rolling motion.
- Gracefully adheres to prefers-reduced-motion with instant position updates.