Scramble Text
A decoder effect — characters cycle through random glyphs and lock in left to right. Plays on mount, on view or on hover.
rAFhover2 files · 90 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/scramble-text.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs scramble-textUsage
import { ScrambleText } from "@/components/opus/text/scramble-text";
<ScrambleText text="ACCESS GRANTED" trigger="view" className="font-mono" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Final text (also the aria-label). |
| trigger | "mount" | "view" | "hover" | "view" | When to play. |
| speed | number | 32 | ms per character settle. |
| charset | string | — | Glyphs used while scrambling. |
| as | ElementType | "span" | Element to render. |
Notes
- Use a monospaced font to stop the width from jittering while it scrambles.