Rolling Counter
A number on reels. Each column that moves spins a full turn to its new digit, and they stop one after another.
Usage
import { RollingCounter } from '@wdzyi/ui';
<RollingCounter value={downloads} />Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- valuenumber
- The number. Changing it spins the reels.
- formatIntl.NumberFormatOptions
- How to write it, such as a currency or a set number of decimals. Only the digits turn.
- localestring = 'en-GB'
- Whose commas and decimal points to use.
- spinboolean = true
- Turns each moving reel a full turn on the way, so even a small change spins. Off, it rolls the short way.
- classNamestring
- Added to its root. It takes its type from wherever it sits.
Notes
- The reels set off together and stop 130ms apart from the left, each running a hair past its digit and settling back, with a light blur while it’s quick.
- Going up, the digits come from below, and going down, from above. A reel caught mid-spin carries on from where it is rather than starting again.
- Each reel is a window one line tall that fades at its top and bottom, so give it a line-height of 1 or more.
- With reduced motion, it just changes.