A word scrambles through random glyphs and resolves letter by letter, holds for a moment and starts over. Monospace, with a blinking cursor.
npx shadcn@latest add https://hyperblur.dev/r/loader-text-scramble.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-text-scramble.tsx.
import { LoaderTextScramble } from "@/components/hyperblur/loader-text-scramble"
<LoaderTextScramble text="Loading" size={20} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Loading" | The word that gets scrambled and resolved. Also the screen reader text when no label is set. |
| glyphs | string | "!<>-_/[]{}=+*^?#%&" | Characters used for the scrambled state. |
| size | number | 20 | Font size in pixels. |
| color | string | "#ededed" | Color of resolved letters. |
| accent | string | "#2f7bff" | Color of scrambled glyphs and the cursor. |
| interval | number | 55 | Milliseconds between frames. |
| label | string | Visible caption under the text. Replaces the default screen reader text. |