Add a dependency-free rolling number to the shared visuals #224
- MA
Adds `RollingNumber` to `@chopin/visuals`: a number whose digits roll to their new value, with no dependency.
## How it works - `Intl.NumberFormat#formatToParts` supplies the characters. Each digit becomes a 0ā9 column translated to its value, so a change is one CSS transition per digit. Separators, currency signs and `%` are static. - Parts are keyed from the right, so the ones column stays the ones column when the number gains or loses a digit. - Screen readers get the formatted value once; the columns are `aria-hidden`. - `prefers-reduced-motion` turns the roll off.
## Motion Uses existing theme tokens: `--duration-linger` (600ms) and `--motion-smooth-out`. The prototype this came from used 700ms with a slight overshoot. The theme has no overshoot curve, so this lands without the bounce. If we want the bounce, that's a new shared token.
## Notes - Not used on any screen yet. This PR is the component, its tests and its export. - Two `dynamic-packages.json` entries, the same pair every sibling component has for passing caller props and `className` through. - Checked in a browser: 343 ā 1,365 rolls the changed columns and settles aligned.
## Checks `bun test packages/visuals`, `bun run types`, `bun run ci`, `check-design-contract`, `check-design-record`: all pass.
š¤ Generated with [Claude Code](https://claude.com/claude-code)
MaggieAppletonmerged 044929a5af4elast month on GitHub
MaggieAppletonhead-ref-deletedlast month on GitHub