Zero-dependency text scramble animations for Vanilla JS, React and Vue.

Scramble text

app.ts TypeScript

import { scramble } from '@scrambl/core'

scramble(document.querySelector('h1'), {
  text: 'Hello World',
  chars: 'blocks',
  from: 'left',
  duration: 800,
  ease: 'easeOutCubic',
})

Playground

Try it yourself

Hello, Scrambl!

text

chars

direction

duration

800ms

cursor

Zero Dependencies

Pure TypeScript, ~3KB gzipped. No runtime bloat.

60fps Engine

requestAnimationFrame-driven with play / pause / restart control.

10 Charsets

blocks, braille, katakana, binary, hex, symbols, and custom strings.

Directional Reveal

Left, right, center, or random reveal with perturbation.

Duration Control

Default reveal pacing now fills the configured duration instead of finishing early.

Multiline Text

Cells preserve line breaks and keep final frames stable for repeated playback.

CJK Mixed Width

Chinese, kana, and Latin glyphs get width-aware cells for multilingual layouts.

Stable Symbols

Symbols, braille, blocks, and full-width glyphs use centered cells to reduce jitter.

Framework Adapters

React hooks, Vue composables. Trigger on hover, click, or scroll.