Text Scramble

A text scramble reveal animation that decodes characters on mount or when re-triggered.

Sora UI

children

className

scrambleColor

holdDuration

duration

speed

trigger

triggerOnHover

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

Prop	Type	Default
`children?`	`string`	-
`as?`	`ElementType`	`"p"`
`scrambleColor?`	`string`	-
`holdDuration?`	`number`	`0`
`duration?`	`number`	`0.8`
`speed?`	`number`	`0.04`
`characterSet?`	`string`	-
`trigger?`	`boolean`	`true`
`triggerOnHover?`	`boolean`	`false`
`className?`	`string`	-
`onScrambleComplete?`	`() => void`	-

Text Scramble

Installation

Usage

Props

On this page