026
Scramble Text
MotionPersonal profile MCP
Move the cursor across the text
Customize
API
Code
<ScrambleText text="Personal profile MCP" />
Install
npx shadcn@latest add https://components.haedong.dev/r/scramble-text.json
Props
ScrambleText is a drop-in for a text node (this site's header, menu and labels use it). useScrambleChars gives the same characters plus moveAt / reset / decode for layouts that react as one, like the Log rows.
| Prop | Type | Description |
|---|---|---|
| text | string | The text. Each character renders in its own span; an sr-only copy keeps the accessible name stable. |
| className | string | Extra classes for the wrapping span (whitespace-pre by default). |
| useScrambleChars(text).chars | ReactNode | Render where the text goes. |
| useScrambleChars(text).moveAt | (clientX: number) => void | Scramble the characters within 28px of the cursor for a few frames. |
| useScrambleChars(text).decode | () => void | Play the left-to-right decode once (landing). |