Scramble Text
betaText whose characters churn through random glyphs and resolve from the inline start, on hover, focus, mount or view.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
Hover over this text!
pnpm dlx @dowel-ui/cli add scramble-textnpm packages installed: class-variance-authority.
import { ScrambleText } from "@/components/ui/scramble-text";Default
Gallery
In ALink
On Mount
<ScrambleText>
| Prop | Type | Default |
|---|---|---|
children (required)The real text. | string | — |
asThe element to render. | ScrambleTextElement | "span" |
charactersThe glyphs to scramble through. | string | CHARACTERS |
durationTotal scramble time, in milliseconds. | number | 600 |
font | "inherit" | "mono" | "inherit" |
ref | Ref<HTMLElement> | — |
speedTime between scramble frames, in milliseconds. | number | 30 |
triggerWhat starts the scramble. | ScrambleTextTrigger | "hover" |
Plus every attribute of <span> except ref, children.
The scrambling glyphs are aria-hidden; an sr-only copy of the real text is what assistive technology reads, so nothing is announced per frame. The server renders the real text. It is not itself interactive: hover and keyboard focus on the nearest link or button that wraps it trigger the effect. No scramble under reduced motion.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes