Scrambl

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

Documentation · Demo Lab · Issues

Scrambl reveals text through configurable scramble, decode, and sweep effects. It is built around a small TypeScript engine with first-class adapters for React and Vue.

Packages

Package	Use it for
@scrambl/core	Vanilla DOM animations and headless custom renderers
@scrambl/react	React hook and component APIs
@scrambl/vue	Vue composable and component APIs

Install

npm install @scrambl/core

npm install @scrambl/react

npm install @scrambl/vue

React and Vue packages include @scrambl/core as a dependency, so you do not need to install the core package separately when using a framework adapter.

Quick Start

Vanilla JS / TypeScript

import { scramble } from '@scrambl/core'

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

instance.restart()

React

import { useScramble } from '@scrambl/react'

export function Hero() {
  const { ref, replay } = useScramble({
    text: 'Hello World',
    chars: 'blocks',
    trigger: 'hover',
  })

  return <h1 ref={ref} onClick={replay} />
}

Vue

<script setup>
import { useScramble } from '@scrambl/vue'

const { ref, replay } = useScramble({
  text: 'Hello World',
  chars: 'blocks',
  trigger: 'hover',
})
</script>

<template>
  <h1 ref="ref" @click="replay" />
</template>

Why Scrambl

• Zero dependencies, pure TypeScript, and small browser-friendly output.
• requestAnimationFrame driven playback with play(), pause(), restart(), and destroy().
• Built-in charsets for blocks, braille, katakana, binary, hex, symbols, numbers, and more.
• Directional reveal from left, right, center, or random order with optional perturbation.
• Stable cell rendering for visually uneven glyphs such as symbols, braille, blocks, full-width kana, and CJK mixed text.
• Deterministic seeds for repeatable animations.
• Headless createScrambler() API for canvas, custom renderers, or manual state pipelines.
• React and Vue adapters with manual, hover, click, and inView triggers.
• Full TypeScript declarations included.

For the most polished visual result with stable cell rendering, use a monospace or monospace-like font. If your design uses a proportional font, prefer renderMode: 'text' for the most natural typography.

Character Sets

scramble(el, { text: 'Decrypting...', chars: 'blocks' })
scramble(el, { text: 'Loading', chars: 'binary', cursor: '|' })
scramble(el, { text: 'Custom', chars: '$€£¥₿' })

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

Documentation

• Installation
• Quick Start
• scramble()
• createScrambler()
• Options
• React
• Vue
• Demo Lab

Requirements

• Node.js 18+ for development
• Modern browsers with requestAnimationFrame
• React 18+ for @scrambl/react
• Vue 3.3+ for @scrambl/vue

License

MIT