Motion UIComponentsComponent

Scramble reveal

Text that churns through random glyphs on scroll-in, then settles character by character.

API reference

Components

`<ScrambleReveal />`

Scramble-decode text with an accessibility split and optional replay().

`children`

string

The copy to scramble into place.

`as?`

ElementType

Element for the in-flow accessible copy. Defaults to "span".

`duration?`

number = 1

Seconds each character stays scrambled before settling. Default 1.

`interval?`

number = 0.05

Seconds between glyph switches while scrambling. Default 0.05.

`stagger?`

number = 0.02

Per-character start delay in seconds. Default 0.02.

`charSet?`

ScrambleCharSet = "symbols"

Glyph palette for the scramble. Default "symbols".

`className?`

string

Shared classes on both the accessible and overlay layers.

`ref?`

Ref<ScrambleRevealHandle>

Imperative handle exposing replay().

Functions

`scheduleReplayReset`

Schedule the replay reset on Motion's shared render step and return cleanup for unmounts or a newer replay request.

scheduleReplayReset(callback: ReplayFrameCallback, schedule: (callback: ReplayFrameCallback) => void = (next) =>
    frame.render(next), cancel: (callback: ReplayFrameCallback) => void = (next) =>
    cancelFrame(next)): () => void