We are live on DevHunt: tool of the week contest

Text Scramble

Hacker-style text deciphering animation on hover or mount.

Preview

Interactive Preview

ACCESS GRANTED

Hover over the text below to trigger manually:

HOVER_TO_DECRYPT

Installation

Usage

tsx

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

export default function Demo() {
  return (
    <h1 className="text-4xl font-bold">
      <TextScramble text="SYSTEM INITIALIZATION" duration={1200} />
    </h1>
  )
}

Props

Prop	Type	Default
text	`string`	-
duration	`number`	800
trigger	`boolean`	true