Solid Bits

Scrambled Text

Once you hover over me, you will see the effect in action! You can customize the radius, duration, and speed of the scramble effect.

Customize

Text
Scramble Characters
Radius100
Duration1.2
Speed0.5

Props

PropertyTypeDefaultDescription
text
string
—
The text content to be scrambled.
radius
number
100
The radius around the mouse pointer within which characters will scramble.
duration
number
1.2
The duration of the scramble effect on a character.
speed
number
0.5
The speed of the scramble animation.
scrambleChars
string
'.:'
The characters used for scrambling.
class
string
""
Additional CSS classes for the component.
style
any
{}
Inline styles for the component.

Dependencies

gsap