@lukeslp/text-scramble

Glitchy text animation — scrambles characters during transitions with randomized timing.

Each character independently transitions from old to new through random intermediate characters. Uses requestAnimationFrame for smooth 60fps rendering. Zero dependencies, works in any browser.

Install

npm install @lukeslp/text-scramble

Usage

import { TextScramble } from '@lukeslp/text-scramble';

const el = document.getElementById('title')!;
const scramble = new TextScramble(el);

// Cycle through phrases
const phrases = ['Hello World', 'Text Scramble', 'Glitch Effect'];
let i = 0;

async function next() {
  await scramble.setText(phrases[i]);
  i = (i + 1) % phrases.length;
  setTimeout(next, 2000);
}

next();

setText() returns a promise that resolves when the animation finishes, so you can chain transitions cleanly.

Custom character set

// Default uses: !<>-_/[]{}=+*^?#________
const scramble = new TextScramble(el, '01');       // Binary glitch
const scramble = new TextScramble(el, '░▒▓█▀▄');   // Block characters
const scramble = new TextScramble(el, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ');

Style the scrambling characters

During animation, in-transition characters get a <span class="dud"> wrapper. Use it to style them differently:

.dud {
  color: #4f46e5;
  opacity: 0.6;
}

API

new TextScramble(el, chars?)

| Param | Type | Description | |-------|------|-------------| | el | HTMLElement | Element whose text will be animated | | chars | string? | Character set for scramble effect (default: !<>-_/[]{}=+*^?#________) |

scramble.setText(newText): Promise<void>

Animates the element's text from its current content to newText. Resolves when the animation completes. Cancels any in-progress animation before starting.

How it works

For each character position, the animation picks a random start frame (0–80) and end frame (start + 0–80). Before start, the old character shows. Between start and end, a random character from the set flickers at ~28% probability per frame. After end, the final character locks in.

Author

Luke Steuber

• Website: lukesteuber.com
• Bluesky: @lukesteuber.com
• Email: [email protected]

License

MIT License — see LICENSE for details.