Scramble Text
Scramble Text creates a mouse-reactive interference effect by scrambling nearby characters, then resolving them back to the original text.
Every signal is buried in chaos. Move through the interference to reveal what hides beneath the static. The truth is always there, waiting to be uncovered by those patient enough to look.
You can easily reuse this component anywhere in your app.
Basic Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | required | Text content to render and scramble. |
chars | string | "01001101" | Character pool used while scrambling. |
speed | number | 35 | Interval in milliseconds between scrambled character updates. |
radius | number | 130 | Cursor proximity radius that activates scrambling. |
as | React.ElementType | "p" | Wrapper element tag (for example "h1" or "span"). |
className | string | "" | Additional classes for the wrapper element. |
style | React.CSSProperties | undefined | Inline style overrides for the wrapper. |
accentColor | string | "#ff6b35" | Accent color used for active scrambled glow. |
Customized Variant
Loading...
Tip: Use Alt + ← / → to navigate