Browse components
Scrambled Text
Letters near the cursor dissolve into flickering glyphs and settle back into the original text, strongest right under the pointer.
Installation
npx shadcn@latest add @glint-ui/scrambled-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/scrambled-text.json
Usage
import { ScrambledText } from "@/components/ui/scrambled-text";
<ScrambledText radius={100} className="font-mono text-2xl" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Move your cursor across this paragraph. Every letter it passes dissolves into noise for a moment, then snaps right back into place as if nothing happened." | Text to render. |
| radius | number | 100 | Pointer radius that scrambles characters, in px. |
| duration | number | 1200 | How long a character under the pointer keeps scrambling, in ms. |
| speed | number | 50 | Ms between glyph swaps. |
| scrambleChars | string | "!<>-_/[]{}=+*^?#01" | Glyphs used while scrambling. |
| scrambleColor | string | "#a3e635" | Color of scrambled glyphs. |
| className | string | — | Extra classes for the root element. |