Letters near the pointer flip to random glyphs and settle back one by one once it moves away.
operator 0x4f2a / session open for 14m
npx shadcn@latest add https://hyperblur.dev/r/text-scramble-hover.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-scramble-hover.tsx.
import { TextScrambleHover } from "@/components/hyperblur/text-scramble-hover"
<TextScrambleHover text="Clearance granted" className="font-mono text-2xl" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. Screen readers get the plain string. |
| radius | number | 90 | Distance in pixels at which letters start to scramble. |
| glyphs | string | "!<>-_/[]{}=+*^?#%&$01" | Characters the letters cycle through while scrambled. |
| accent | string | "#7fb3ff" | Color of the scrambled glyphs. |
| resolveTime | number | 0.35 | Spread in seconds over which letters settle back after the pointer leaves. |
| align | "left" | "center" | "right" | "center" | Horizontal alignment of the text inside its block. |