Scramble Text

An animated text component that creates a hacker-style character scrambling effect on hover, revealing text with a smooth decoding animation.

Preview

hover-over-me

Install the component using the CLI.

npx shadcn@latest add https://siddz.com/r/scramble-text.json

Import the component:

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

Use it in your code:

<ScrambleText text="Hello World" />

Property	Type	Default	Description
`text*`	`string`	`-`	The text content to display and animate.
`speed`	`number`	`30`	Animation speed in milliseconds. Lower values = faster animation.
`chars`	`string`	`all printable characters`	Character set used for the scramble effect.
`className`	`string`	`""`	Additional CSS classes to apply to the component.

An animated text component that creates a hacker-style character scrambling effect on hover, revealing text with a smooth decoding animation.

hover-over-me

Install the component using the CLI.

npx shadcn@latest add https://siddz.com/r/scramble-text.json

Import the component:

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

Use it in your code:

<ScrambleText text="Hello World" />

Property	Type	Default	Description
`text*`	`string`	`-`	The text content to display and animate.
`speed`	`number`	`30`	Animation speed in milliseconds. Lower values = faster animation.
`chars`	`string`	`all printable characters`	Character set used for the scramble effect.
`className`	`string`	`""`	Additional CSS classes to apply to the component.