Text Scramble

MAX

A scramble text effect with animation for elements

Demo

Scramble your text with style

Exclusive Launch 50% offspots left: 0 / 50

$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
<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