Text Scramble Hover

MAX

A scramble text effect triggered by hover for elements

Demo

Hover to scramble text

Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$39.99

$19.99

Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions

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:

PropertyTypeDefaultDescription
childrenReactNode-The text content to animate
asElementType"p"The HTML element to render
classNamestring""Additional CSS classes
durationnumber0.8Total duration of the animation (seconds)
speednumber0.04Speed of each animation frame
characterSetstring"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