@scrambl/core is the low-level Scrambl package. Use it directly with DOM elements, or use the headless API when you want to drive canvas, custom renderers, framework state, or your own animation pipeline.

Install

npm install @scrambl/core

Quick Start

import { scramble } from '@scrambl/core'

const instance = scramble(document.querySelector('#title'), {
  text: 'Hello World',
  chars: 'blocks',
  from: 'left',
  duration: 800,
  ease: 'easeOutCubic',
})

instance.pause()
instance.play()
instance.restart()
instance.destroy()

CDN

<h1 id="title">Hello World</h1>

<script type="module">
  import { scramble } from 'https://esm.sh/@scrambl/core'

  scramble(document.querySelector('#title'), {
    text: 'Hello World',
    chars: 'blocks',
  })
</script>

scramble()

function scramble(element: HTMLElement, options?: ScrambleOptions): ScrambleInstance

The DOM API reads the element's current textContent as the source text unless override is provided, then reveals the target text with a requestAnimationFrame loop.

const instance = scramble(el, {
  text: 'Decrypting...',
  chars: 'katakana',
  from: 'center',
  duration: 1000,
  perturbation: 0.25,
  cursor: '░▒▓█',
  onComplete: () => console.log('done'),
})

The returned instance exposes:

| Method / property | Description | | --- | --- | | play() | Start or resume the animation | | pause() | Pause the animation | | restart() | Restart from the beginning | | destroy() | Stop and clean up resources | | isPlaying | Whether the animation is currently playing | | progress | Current progress from 0 to 1 |

Headless Rendering

Use createScrambler() when you need scramble output without direct DOM mutation.

import { createScrambler } from '@scrambl/core'

createScrambler({
  text: 'Loading complete',
  fromText: 'Please wait...',
  chars: 'blocks',
  duration: 1000,
  onFrame: (text, progress) => {
    console.log(progress, text)
  },
})

Options

Common options:

| Option | Default | Description | | --- | --- | --- | | text | element text | Target text to reveal | | chars | 'blocks' | Built-in preset name or custom character string | | from | 'left' | Reveal direction: left, right, center, or random | | duration | 800 | Total animation duration in milliseconds | | ease | 'linear' | Built-in easing name or custom (t) => number function | | cursor | '' | Sweep pattern at the reveal front | | seed | random | Deterministic random seed | | override | false | Initial text override, for example '' to start blank | | renderMode | 'auto' | Use text, cells, or automatic stable layout |

See the full options reference.

Character Sets

Built-in presets include blocks, shades, braille, katakana, binary, hex, numbers, lowercase, uppercase, and symbols.

scramble(el, { text: 'Blocks', chars: 'blocks' })
scramble(el, { text: 'Binary', chars: 'binary' })
scramble(el, { text: 'Custom', chars: '$€£¥₿' })

Stable Layout

Scrambl can render each character inside a stable inline cell to reduce visual jitter from uneven glyph metrics. This is enabled automatically for symbols, braille, blocks, full-width kana, and CJK mixed text. You can also force it:

scramble(el, {
  text: 'Hello World',
  chars: 'braille',
  renderMode: 'cells',
})

Requirements

• Modern browsers with requestAnimationFrame
• TypeScript declarations are included

License

MIT