Demo Lab

Use this page as a compact visual regression surface while tuning Scrambl. Replay the full matrix after changing timing, charset, or DOM rendering behavior.

Examples

Demo Lab

Fast visual coverage for presets, timing, render modes, and multilingual edge cases.

Replay all

Workbench

Scrambl Demo Lab multiline ready

TextScrambl Demo Lab multiline ready

Chars

blocksshadesbraillesymbolsnumbersbinaryhexkatakanakatakanaFull

Direction

leftrightcenterrandom

Duration 1600msPerturbation 0.00

Render mode

autotextcells

Hero headlineblocks + left + cursor

Replay

SYSTEM ONLINE

scramble(el, {
  text: 'SYSTEM ONLINE',
  chars: 'blocks',
  from: 'left',
  duration: 1200,
  cursor: '▌',
  ease: 'easeOutCubic',
  override: ''
})

Glitch burstsymbols + random + perturbation

Replay

ERROR: SIGNAL LOST

scramble(el, {
  text: 'ERROR: SIGNAL LOST',
  chars: 'symbols',
  from: 'random',
  duration: 520,
  perturbation: 0.9,
  ease: 'easeOutQuad',
  loop: 2
})

Numeric tickernumbers + right

Replay

BUILD 2026.05.07

scramble(el, {
  text: 'BUILD 2026.05.07',
  chars: 'numbers',
  from: 'right',
  duration: 900,
  ease: 'easeOutExpo',
  seed: 407
})

Kana decodekatakana + center + cells

Replay

Wake up, Scrambl

scramble(el, {
  text: 'Wake up, Scrambl',
  chars: 'katakana',
  from: 'center',
  duration: 1500,
  cursor: '░',
  renderMode: 'cells',
  ease: 'easeInOutCubic'
})

MultilingualkatakanaFull + auto

Replay

你好 Scrambl こんにちは

scramble(el, {
  text: '你好 Scrambl こんにちは',
  chars: 'katakanaFull',
  from: 'left',
  duration: 1300,
  renderMode: 'auto',
  fill: ' '
})

Long labelbraille + stable layout

Replay

Zero-dependency text scramble animation library

scramble(el, {
  text: 'Zero-dependency text scramble animation library',
  chars: 'braille',
  from: 'random',
  duration: 1800,
  renderMode: 'auto',
  perturbation: 0.35,
  seed: 99
})