open-index/open-npm huggingface dataset:
npm package: @geepers/text-scramble
Description: Glitchy text animation effect — scrambles characters during transitions with randomized timing. Zero dependencies, works in any browser.
Author: Luke Steuber
Latest version: 1.0.0

# @lukeslp/text-scramble

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

![npm](https://img.shields.io/npm/v/@lukeslp/text-scramble.svg)
![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)

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

```bash
npm install @lukeslp/text-scramble
```

## Usage

```ts
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

```ts
// 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:

```css
.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](https://lukesteuber.com)
- Bluesky: [@lukesteuber.com](https://bsky.app/profile/lukesteuber.com)
- Email: luke@lukesteuber.com

## License

MIT License — see [LICENSE](LICENSE) for details.