Text Scramble

MAX

A scramble text effect with animation for elements

Demo

Scramble your text with style

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
<TextScramble duration={0.8} speed={0.04}>
  Scramble your text with style
</TextScramble>
 
// Fast scramble with custom characters
<TextScramble 
  duration={0.5}
  speed={0.02}
  characterSet="!@#$%^&*()_+-=[]{}|;:,.<>?"
  as="h1"
  className="text-4xl font-bold"
>
  Fast Special Characters
</TextScramble>
 
// Slow scramble with numbers only
<TextScramble 
  duration={1.5}
  speed={0.06}
  characterSet="0123456789"
  className="text-2xl"
>
  Slow Numbers Only
</TextScramble>
 
// With completion callback
<TextScramble 
  duration={1}
  speed={0.03}
  onScrambleComplete={() => console.log("Scramble completed!")}
>
  Scramble with callback
</TextScramble>

Properties

The TextScramble 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
`trigger`	`boolean`	`true`	Whether to trigger the animation
`onScrambleComplete`	`() => void`	-	Callback executed when animation completes

Usage Examples

Default Scramble

Fast Special Chars

Slow Numbers

Fast Uppercase

Slow Lowercase

Matrix Style

Documentation

Animations