Skip to content

Options

ScrambleOptions

All parameters are optional unless noted.

ParameterTypeDefaultDescription
textstringelement’s textContentTarget text to reveal
from'left' | 'right' | 'center' | 'random''left'Direction of character reveal
charspreset name or custom string'blocks'Characters used during scramble. See Character Sets
cursorstring''Cursor pattern for sweep effect at the reveal front
durationnumber800Total animation duration in ms
delaynumber0Delay before animation starts in ms
easeeasing name or (t: number) => number'linear'Easing function. See Easing
stepsnumber10Step count when ease is 'steps'
perturbationnumber (0–1)0Randomization of reveal timing
revealRatenumberautoMaximum interval between character reveals in ms
settleDurationnumber250Time for each character to settle in ms
settleRatenumber30Interval between settle steps in ms
reversedbooleanfalseReverse the animation direction
overridestring | falsefalseOverride initial text (e.g. '' to start blank)
fillstring' 'Fill character for text length differences
seednumberrandomSeed for deterministic random generation
speednumber1Playback speed multiplier
loopboolean | numberfalseLoop: true for infinite, or a count
renderMode'auto' | 'text' | 'cells''auto'DOM rendering strategy. Auto uses stable cells for visually uneven glyphs such as symbols, braille, blocks, or full-width kana

Callbacks

CallbackTypeDescription
onStart() => voidFires when animation starts
onChange(text: string, progress: number) => voidFires each frame with current text and progress
onComplete() => voidFires when animation finishes

TriggerType (React / Vue only)

Framework adapters support an additional trigger option:

ValueDescription
'manual'Only plays when play() or replay() is called
'hover'Replays on pointerenter
'click'Replays on click
'inView'Plays once when the element enters the viewport