Text Scramble

Random glyph noise that resolves into the real text — fires on hover, mount, or first scroll into view.

text-scramble

0px

Customize

Edit props; preview updates instantly.

Customize

Trigger

Easing

Charset

Duration (ms)

800ms

Tick (ms)

30ms

Props

Props accepted by TextScramble.

Prop	Type	Default	Description
text	string	—	Final, locked-in text. Used as `aria-label` so screen readers always read the plain string regardless of mode.
trigger	"hover" \| "mount" \| "view"	"hover"	What kicks off the animation. `hover` runs on mouse-enter; `mount` plays once on first render; `view` plays the first time the element scrolls into the viewport.
easing	"linear" \| "ease-in" \| "ease-out" \| "ease-in-out"	"linear"	Easing curve applied to the per-letter reveal schedule. `ease-out` resolves quickly at the start and slows toward the end; `ease-in` does the opposite.
duration	number	800	Total animation duration in ms (minimum 50ms).
tickMs	number	30	Frame interval in ms. Lower values refresh the scramble noise more frequently (minimum 8ms).
charset	string	"X$@aHzo0y#?*01+"	Glyphs sampled during the scramble noise — used by every mode.
replayKey	string \| number \| boolean	—	Change this value to replay the animation imperatively — bind it to a counter you increment on click, etc.
className	string	—	Extra class names merged onto the root span.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/text-scramble.json

Usage

Import the component and drop it into a render.

demo.tsx13 lines

import { TextScramble } from "@/components/lazy-ui/text-animate/text-scramble";

export function Demo() {
  return (
    <TextScramble
      text="Hover to decode."
      trigger="hover"
      easing="ease-out"
      duration={800}
      className="text-3xl font-mono text-neutral-100"
    />
  );
}