Scrambled Text

Detects cursor position and applies a distortion effect to text.

Default

Move the pointer over the text. Characters inside the radius scramble and settle back as you leave.

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

Scramble Characters

Radius100

Duration1.2

Speed0.5

Prop	Type	Default	Description
`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.
`text`	`string`	`""`	The text content to be scrambled.

Keyboard shortcuts and ARIA behavior.

The effect follows the pointer only, so keyboard and touch users read the static text.