Motion UIComponentsComponent

Rolling text button

A button label that rolls as a whole or character by character on hover or keyboard focus.

API reference

Components

`<RollingTextButton />`

A clipped two-copy label rollover. Hover or keyboard focus shifts the label stack by exactly one line, making the duplicate replace the original without changing the button's dimensions. Reduced motion leaves one copy in place.

`children`

string

The button label. It is duplicated visually for the rolling effect, while the button itself keeps one accessible name.

`direction?`

RollingTextDirection = "down"

Direction the incoming label travels. "down" (default) rolls a copy in from above; "up" rolls a copy in from below.

`staggerCharacters?`

boolean = false

Split both visual copies into characters and roll each character separately. Defaults to false, which moves the complete label at once.

`staggerMultiplier?`

number = 1

Multiplier applied to the theme's tight stagger when staggerCharacters is enabled. Defaults to 1.

`type?`

"button" | "submit" = "button"

Button type. Defaults to "button".

`disabled?`

boolean

Disables hover, focus and click interactions.

`onClick?`

MouseEventHandler<HTMLButtonElement>

Click handler.

`"aria-label"?`

string

Accessible name override. Defaults to children.

`className?`

string

Merged onto the button root. Apply the surface, shape and spacing here.

Functions

`createPlaythroughController`

Keeps the current state latched while its animation is running. Any reversal is queued, then applied only after completeAnimation.

createPlaythroughController(onChange: (active: boolean) => void): PlaythroughController

Returns

`request`

(active: boolean) => void

`completeAnimation`

() => void

`reset`

() => void

Featured in

See the rolling text button composed into full sections.

Button: Rolling textAn example of a primary call-to-action whose duplicate label rolls into place on hover or keyboard focus in Motion for React.

Button: Staggered rolling textAn example of a primary call-to-action whose duplicated label is split into characters and rolled into place with a stagger in Motion for React.