githubnext/chopinPublic

Let's compose rich plans together

Add a dependency-free rolling number to the shared visuals #224

MergedMaggieAppletonmerged 1 commit intomainfromrefs/pull/224/head
  1. 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)

  2. MaggieAppletonmerged 044929a5af4elast month on GitHub

  3. MaggieAppletonclosedlast month on GitHub

  4. MaggieAppletonhead-ref-deletedlast month on GitHub