Interactive Scramble
MAX
An interactive background animation with scrambling characters that react to mouse movement.
Demo
SCRAMBLE
Interactive Scramble
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
HELLO WORLD
Custom Scramble
Properties
The InteractiveScramble component accepts the following props:
| Property | Type | Default | Description |
|---|---|---|---|
density | number | 50 | Density of characters (percentage of grid cells filled) |
characterSet | string | A-Z, a-z, 0-9, symbols | Set of characters to use for scrambling |
scrambleDuration | number | 1000 | Duration (ms) of the scramble animation per character |
scrambleSpeed | number | 50 | Speed (ms) between scramble updates |
interactionRadius | number | 100 | Radius (px) around the mouse that triggers scrambling |
className | string | "" | Additional CSS classes |
staticText | string | "" | Optional static background text |
textOpacity | number | 0.1 | Opacity of the static background text |
color | string | "cyan" | Color of the scrambling characters (tailwind color class) |
