Scramble Text

Matrix-style text scramble effect that resolves characters left-to-right.

npx uniqueui add scramble-text

Preview

UNIQUEUI COMPONENTSHover to scramble again

Usage

import { ScrambleText } from "@/components/ui/scramble-text";

export default function Example() {
  return (
    <div className="space-y-6 text-center p-10 text-white">
      <ScrambleText text="UNIQUEUI COMPONENTS" className="text-3xl font-bold tracking-wider text-emerald-400" />
      <ScrambleText
        text="Hover to scramble again"
        triggerOnView={false}
        className="text-lg text-neutral-400 cursor-pointer"
      />
    </div>
  );
}

Props

Prop	Type	Description
`text`	`string`	The target string the scramble transition eventually resolves into.
`className`	`string`	Standard Tailwind configuration for typographic adjustment.
`speed`	`number`	Multiplier scaling the character mutation flip rate.
`scrambleDuration`	`number`	Duration the sequence spends generating noise before revealing real characters.
`triggerOnView`	`boolean`	Wait until intersection observers detect the element on screen before starting.
`once`	`boolean`	Lock the transition state as resolved after completing one full loop.
`characterSet`	`string`	A custom dictionary string configuring the alphabet the noise generator selects from.