Skip to content
zidane
UI kit reference

motion/roll

import { … } from 'zidane-ui'ui/src/motion/roll.tsx

Crossfade (scale): spinner → check → x
Crossfade (text)
Running tests…
Presence
new
RollingText in SmoothWidth
HeldWidth
1s
SwapIcon

Components#

RollingTextComponent#

Text whose changed characters roll like an odometer: up when the value grows, down when it shrinks. Unchanged characters hold still, so a counter ticking 3.51k → 3.52k moves one digit. The formatting stays whatever the caller renders (3.51k, $42.057, 12s); pass value so the direction follows the number rather than the characters. Wrap in SmoothWidth when the length can change.

TypeScript
function RollingText(props: RollingTextProps): Element

Parameters

Parameters
NameTypeDescription
propsRollingTextProps

Component props.

Returns

Element

Props

RollingText props
NameTypeDescription
className?string

Extra classes on the wrapping element.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

textstring

The formatted text to show. Characters that differ from the previous text roll.

value?number

The number behind text. When given, the roll goes down if it fell and up otherwise; without it, it always rolls up.

ui/src/motion/roll.tsx:64

Functions#

readRollMsFunction#

How long one roll plays, read off the motion vars: the longer of the enter (settle, fade) and the exit.

TypeScript
function readRollMs(): number

Returns

number

ui/src/motion/roll.tsx:12

rollCellsFunction#

Per-character diff for RollingText, aligned from the RIGHT so the units stay in their column when the number grows a digit (9.99k → 10.0k). Each cell is the new character plus the one it replaces: null when unchanged, '' when the column is new.

TypeScript
function rollCells(prev: string, next: string): { char: string; from: string | null }[]

Parameters

Parameters
NameTypeDescription
prevstring

The text before the change.

nextstring

The text after the change.

Returns

{ char: string; from: string | null }[]

One cell per character of next.

ui/src/motion/roll.tsx:30

Interfaces#

RollingTextPropsInterface#

Props for RollingText.

TypeScript
interface RollingTextProps

Properties

RollingTextProps properties
NameTypeDescription
className?string

Extra classes on the wrapping element.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

textstring

The formatted text to show. Characters that differ from the previous text roll.

value?number

The number behind text. When given, the roll goes down if it fell and up otherwise; without it, it always rolls up.

ui/src/motion/roll.tsx:40

Types#

RollDirectionType#

Direction characters roll in RollingText: up when the value grows, down when it shrinks.

TypeScript
type RollDirection = 'up' | 'down'

ui/src/motion/roll.tsx:18