Digit Swap
Rolls only the digits that change.
@paneui/thememotion
Installation
pnpm dlx shadcn@latest add @paneui/digit-swapUsage
Examples
Motion
Glyphs slide 60% and blur 2px while fading, with an ease-out curve. With reduced motion they only cross-fade, capped at 150ms and with no stagger.
Accessibility
The full value is rendered once as screen-reader text; the animated glyphs are aria-hidden.
DigitSwap
Fixed-slot characters that roll when they change. Digits sit in 1ch slots keyed from the right, so nothing jitters. Also accepts every prop of span.
- value*
- string | number
- Number or pre-formatted string (
"$1,204","•••• 4242"). Each character gets its own slot. - direction= "auto"
- "up" | "down" | "auto"
- Where new glyphs enter from.
autopicksupwhen the numeric value grows anddownwhen it shrinks. - duration= 0.32
- number
- Seconds per glyph roll.
- stagger= 0.02
- number
- Seconds between neighbouring glyphs.
- staggerFrom= "start"
- "start" | "end"
- Which end the stagger starts from.
endripples right to left. - animationKey
- string | number
- Change it to replay every glyph even when the characters are the same.
- suffixLength= 0
- number
- Number of trailing characters that get
suffixClassName(units, cents,/mo). - glyphClassName
- string
- Class for each animated glyph.
- suffixClassName
- string
- Class for the trailing
suffixLengthslots.
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | string | number | — | Number or pre-formatted string ("$1,204", "•••• 4242"). Each character gets its own slot. |
| direction | "up" | "down" | "auto" | "auto" | Where new glyphs enter from. auto picks up when the numeric value grows and down when it shrinks. |
| duration | number | 0.32 | Seconds per glyph roll. |
| stagger | number | 0.02 | Seconds between neighbouring glyphs. |
| staggerFrom | "start" | "end" | "start" | Which end the stagger starts from. end ripples right to left. |
| animationKey | string | number | — | Change it to replay every glyph even when the characters are the same. |
| suffixLength | number | 0 | Number of trailing characters that get suffixClassName (units, cents, /mo). |
| glyphClassName | string | — | Class for each animated glyph. |
| suffixClassName | string | — | Class for the trailing suffixLength slots. |
- data-direction
upordown: the direction of the latest roll.
| Data attribute | Description |
|---|---|
| data-direction | up or down: the direction of the latest roll. |