Text Scramble Hover

MAX

A scramble text effect triggered by hover for elements

Demo

Hover to scramble text

PREMIUM

MAX

Acquire the MAX Plan

Unlock unlimited potential with our most advanced features and priority support.

All updates

All animations

No subscriptions

No hidden fees

$19.99

Payment once and get lifetime access

Usage Example

// Basic scramble effect on hover
<TextScrambleHover duration={0.8} speed={0.04}>
  Hover to scramble this text
</TextScrambleHover>
 
// Fast scramble with special characters
<TextScrambleHover 
  duration={0.5}
  speed={0.02}
  characterSet="!@#$%^&*()_+-=[]{}|;:,.<>?"
  as="h1"
  className="text-4xl font-bold text-red-400"
>
  Fast Special Characters Hover
</TextScrambleHover>
 
// Slow scramble with numbers only
<TextScrambleHover 
  duration={1.2}
  speed={0.06}
  characterSet="0123456789"
  className="text-2xl"
>
  Slow Numbers Hover Effect
</TextScrambleHover>
 
// With completion callback
<TextScrambleHover 
  duration={1}
  speed={0.03}
  onScrambleComplete={() => console.log("Hover scramble completed!")}
>
  Hover scramble with callback
</TextScrambleHover>

Properties

The TextScrambleHover component accepts the following props:

Property	Type	Default	Description
`children`	`ReactNode`	-	The text content to animate
`as`	`ElementType`	`"p"`	The HTML element to render
`className`	`string`	`""`	Additional CSS classes
`duration`	`number`	`0.8`	Total duration of the animation (seconds)
`speed`	`number`	`0.04`	Speed of each animation frame
`characterSet`	`string`	`"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"`	Character set for scrambling
`onScrambleComplete`	`() => void`	-	Callback executed when animation completes

Differences with TextScramble

⚠️ No trigger prop: Animation triggers automatically on hover
🎨 Default styles: Includes cursor-pointer and hover:text-blue-400
🖱️ Interaction: Triggered with onMouseEnter instead of manual trigger
🔄 Reusable: Each hover executes the animation again

Usage Examples

Hover Default

Fast Special Chars

Slow Numbers

Fast Uppercase

Slow Lowercase

Matrix Style

Documentation

Animations