scrmbl

The effect, without the baggage

Scramble text is familiar: characters flash through random glyphs, then resolve into something readable. It is the classic decrypt effect. The animation is simple to recognize and surprisingly easy to get wrong once the text changes mid-run, spans more than one line, contains emoji, or has to finish at an exact moment.

scrmbl packages that interaction as a small framework-agnostic engine with zero runtime dependencies. The same core powers entrypoints for React, Vue, Svelte, and vanilla JavaScript, so the effect behaves the same way without asking every project to carry a different implementation.

Here’s scrmbl running on this page

Each line uses the published package itself: same phrase, same timing, four different character sets.

Replay all

Uppercase Built to ship.

Binary Built to ship.

Blocks Built to ship.

Katakana Built to ship.

The hard parts are invisible

The public API is small. Underneath it, scrmbl compresses its stagger automatically so long strings still finish within the duration you set. It segments text by grapheme instead of code unit, which keeps emoji and combined characters intact. Seeded runs make the supposedly random animation deterministic when a design needs repeatability.

Updates are interruptible, too. New text can take over while an animation is still running instead of waiting for the previous sequence to finish or snapping through an awkward reset.

Accessibility is built into the default behavior. Assistive technology gets the final text, the animated glyphs stay hidden, and reduced-motion preferences resolve the animation immediately. Once the effect settles, the DOM flattens back to plain text for selection, wrapping, and search indexing.

One engine, four ways in

React gets a component and hook. Vue and Svelte get native adapters. Vanilla JavaScript gets a controller for direct DOM use. Each entrypoint stays thin, while duration, stagger, character sets, animation order, callbacks, and reduced-motion behavior live in the shared engine.