Scrambled Text for React

Scrambled Text is still until the pointer moves over it. Then the character under the pointer, and two on each side of it, churn through scrambled glyphs, dots and colons by default, and keep churning for a moment after the pointer moves on, so a short trail follows it across the line before the characters settle back. Hold the pointer still and the characters around it settle in place.

Use it for a paragraph or a heading that invites the pointer: a hero, a portfolio, a teaser. To decode a whole line once, on hover, in view or on load, use Decrypted Text; for zeros and ones, Binary Text. It's CSS only: every character is a window over a column of glyphs ending in itself. Near the pointer, a CSS keyframe animation the install adds to your stylesheet steps through the column; once the pointer has gone, a stepped transition runs it back, so there's no script and nothing random. With reduced motion the text stays still.

Installation

Usage

import { ScrambledText } from "@/components/ui/scrambled-text";

<ScrambledText text="Move the pointer across these words." />

Demos

Characters

characters is what the scramble draws from: brackets and symbols for a terminal, 01 for bits. The default, .:, dissolves the letters into dust.

Timing

steps is how many glyphs a character runs through before it settles, and speed how long each shows; together they're the length of the trail, 400 ms by default.

Accessibility

Screen readers read the text once, from a visually hidden copy; the glyphs are hidden from them. The text is plain at rest and settles under a still pointer, so the effect never stands between a reader and the words, and every character keeps its own width, so the line never shifts. There's nothing to do with a keyboard: the text is simply there. With reduced motion nothing scrambles.

FAQ

API Reference