Recipes

Typewriter Reveal

Start from blank text and reveal letter by letter from left:

import { scramble } from '@scrambl/core'

scramble(el, {
  text: 'System online.',
  override: '',
  chars: 'blocks',
  from: 'left',
  duration: 1500,
  cursor: '▌',
})

Glitch Effect

Fast scramble with high perturbation for a glitchy look:

scramble(el, {
  text: 'ERROR: SIGNAL LOST',
  chars: 'symbols',
  perturbation: 0.8,
  duration: 400,
  from: 'random',
  loop: 3,
})

Matrix Decode

Katakana characters decoding from center outward:

scramble(el, {
  text: 'Wake up, Neo...',
  chars: 'katakana',
  from: 'center',
  duration: 2000,
  ease: 'easeOutExpo',
  cursor: '░',
})

Counter / Number Ticker

Scramble through numbers before landing on a value:

scramble(el, {
  text: '42,069',
  chars: 'numbers',
  from: 'right',
  duration: 1000,
  ease: 'easeOutQuad',
})

Password Mask

Reveal text through asterisks:

scramble(el, {
  text: 'Access Granted',
  chars: '***',
  from: 'left',
  duration: 1200,
  cursor: '|',
})

Looping Ambient Text

Continuously cycling scramble for background elements:

scramble(el, {
  text: el.textContent,
  chars: 'braille',
  duration: 3000,
  perturbation: 0.5,
  loop: true,
  ease: 'easeInOutQuad',
})

Sound Integration

Pair with Web Audio API for audio-reactive scramble:

const ctx = new AudioContext()

scramble(el, {
  text: 'Audio Active',
  chars: 'blocks',
  onChange: () => {
    const osc = ctx.createOscillator()
    const gain = ctx.createGain()
    osc.frequency.value = 3000 + Math.random() * 1000
    gain.gain.setValueAtTime(0.02, ctx.currentTime)
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.01)
    osc.connect(gain).connect(ctx.destination)
    osc.start()
    osc.stop(ctx.currentTime + 0.01)
  },
})

Deterministic Animations

Use seed for reproducible scramble sequences:

scramble(el, {
  text: 'Always the same',
  chars: 'blocks',
  seed: 12345,
  perturbation: 0.5,
  from: 'random',
})