Scramble Text React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ScrambleText from "./ScrambleText";

export default function Example() {
  return (
    <ScrambleText
      text={"MAKE SOME NOISE"}
      duration={900}
      characters={"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"}
      trigger={"hover"}
      color={"#eee7fa"}
      scrambleColor={"#a78ce6"}
    />
  );
}

Using Scramble Text

Use a short phrase that remains useful after the characters settle. characters defines the symbols used during the scramble.

Choose trigger to match the interaction and duration to control how quickly the final text appears. Keep text and scramble colours readable against the background.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to reveal. The accessible label always contains the complete text.
duration	number	No	900	Reveal duration in milliseconds.
characters	string	No	"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"	Characters sampled while letters are unresolved.
trigger	string	No	"hover"	Use hover for pointer and keyboard focus, or view for one reveal on entering the viewport.
color	string	No	"currentColor"	Final text colour.
scrambleColor	string	No	"#8d82ba"	Colour of the unresolved characters.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.