Scrambled text that locks in from the middle outward. Each letter flares with a soft glow the moment it resolves.
npx shadcn@latest add https://hyperblur.dev/r/text-scramble-center.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-scramble-center.tsx.
import { TextScrambleCenter } from "@/components/hyperblur/text-scramble-center"
<TextScrambleCenter text="SIGNAL ACQUIRED" className="text-2xl font-bold tracking-widest text-center" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | The text to resolve. Also the accessible name of the element. |
| speed | number | 70 | Milliseconds of delay added for every letter of distance from the center. |
| charset | string | "!<>-_/[]{}=+*^?#%&$01" | Characters the unresolved letters cycle through. |
| accent | string | "#7fb3ff" | Color of the scrambling glyphs and of the glow at the resolving edge. |
| glow | number | 1 | Strength of the glow on freshly resolved letters. 0 turns it off. |
| replay | boolean | true | Replay the effect on click and on Enter or Space. Turns the element into a focusable button. |