Options

ScrambleOptions

All parameters are optional unless noted.

Parameter	Type	Default	Description
text	string	element’s textContent	Target text to reveal
from	'left' | 'right' | 'center' | 'random'	'left'	Direction of character reveal
chars	preset name or custom string	'blocks'	Characters used during scramble. See Character Sets
cursor	string	''	Cursor pattern for sweep effect at the reveal front
duration	number	800	Total animation duration in ms
delay	number	0	Delay before animation starts in ms
ease	easing name or (t: number) => number	'linear'	Easing function. See Easing
steps	number	10	Step count when ease is 'steps'
perturbation	number (0–1)	0	Randomization of reveal timing
revealRate	number	auto	Maximum interval between character reveals in ms
settleDuration	number	250	Time for each character to settle in ms
settleRate	number	30	Interval between settle steps in ms
reversed	boolean	false	Reverse the animation direction
override	string | false	false	Override initial text (e.g. '' to start blank)
fill	string	' '	Fill character for text length differences
seed	number	random	Seed for deterministic random generation
speed	number	1	Playback speed multiplier
loop	boolean | number	false	Loop: true for infinite, or a count
renderMode	'auto' | 'text' | 'cells'	'auto'	DOM rendering strategy. auto chooses stable cells for glyph sets likely to shift layout, text keeps natural text flow, and cells forces fixed character cells

Render Modes

Scrambl supports three DOM rendering modes:

• auto: safety-first default. It switches to stable character cells for glyph sets that are more likely to jump in width or trigger fallback-font jitter, such as symbols, braille, blocks, and full-width kana.
• text: natural text flow. This is the best choice for proportional fonts, brand type, and editorial layouts where you want the final text to feel like normal typography.
• cells: fixed character cells. This is the most stable option for visually uneven glyphs, terminal-style treatments, and monospace presentations.

Recommended usage

• Use auto when you want a good default and do not need strict art direction.
• Use text when the page uses a proportional font and you want the most natural result.
• Use cells when you want the most stable decode effect and are happy with a gridded presentation.

Monospace guidance

cells mode is optimized for monospace or monospace-like presentation. It can still be used with proportional fonts, but some fonts will look tighter or more mechanical because each character is rendered inside a fixed-width cell.

Callbacks

Callback	Type	Description
onStart	() => void	Fires when animation starts
onChange	(text: string, progress: number) => void	Fires each frame with current text and progress
onComplete	() => void	Fires when animation finishes

TriggerType (React / Vue only)

Framework adapters support an additional trigger option:

Value	Description
'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