Text that churns through random glyphs and settles left to right when it scrolls into view. Click or press Enter to replay it.
Incremental caching cuts cold starts by 38%.
Click the headline to replay
npx shadcn@latest add https://hyperblur.dev/r/text-scramble-view.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-scramble-view.tsx.
import { TextScrambleView } from "@/components/hyperblur/text-scramble-view"
<TextScrambleView text="Faster builds, fewer surprises" className="text-3xl font-semibold" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | The text to resolve. Also the accessible name of the element. |
| speed | number | 45 | Milliseconds between one letter settling and the next. Lower is faster. |
| charset | string | "!<>-_/[]{}=+*^?#%&$01" | Characters the unresolved letters cycle through. |
| accent | string | "#7fb3ff" | Color of the glyphs while they are still scrambling. |
| replay | boolean | true | Replay the effect on click and on Enter or Space. Turns the element into a focusable button. |