Installation

Usage

import { TextScramble } from '@/components/sora-ui/texts/text-scramble';

export default function Page() {
  return (
    <TextScramble
      as="h2"
      className="font-mono text-2xl font-bold uppercase tracking-widest"
    >
      Sora UI
    </TextScramble>
  );
}

Re-run the animation by toggling trigger:

const [active, setActive] = useState(true);

<TextScramble trigger={active}>Decode me</TextScramble>;

Run on hover instead of on mount (trigger is ignored automatically):

<TextScramble triggerOnHover className="cursor-pointer">
  Hover me
</TextScramble>

Color sweep while decoding — scramble noise in one color, revealed letters keep your text color:

<TextScramble
  className="font-mono text-2xl font-bold text-foreground"
  scrambleColor="#fb460d"
  holdDuration={0.5}
>
  Sora UI
</TextScramble>

holdDuration scrambles in place first; then the reveal sweeps left to right.

Props

When to Use

Use TextScramble for hero headings, data dashboards revealing a new value, or any reveal moment where the text should feel like it is being decoded. It pairs well with monospace or uppercase fonts where individual character changes are visually clear.

The triggerOnHover mode works well for navigation labels and interactive buttons that reward hovering.

Accessibility

The final decoded text is always in the DOM — the scramble is a visual effect applied character by character. Screen readers announce the final string. When prefers-reduced-motion: reduce is set, the component already skips the scramble automatically (via useReducedMotion()) and renders the final text directly — no extra configuration needed.