Pro
Scramble text
Text that decodes into place: each letter flickers through a few glyphs and settles, left to right. The finished words sit underneath holding the width, so nothing moves, and they are what a screen reader reads.
pnpm dlx shadcn@latest add @caliper/scramble-textWhen to use
Use it for
- A headline or label arriving on screen, or a button's word on hover.
- Developer tools and launch pages with a technical voice.
Skip it when
- Body text, numbers people read precisely, or anything that changes often.
- More than one or two per screen.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Three triggers
- Once on mount, each time it scrolls into view, or on hover and focus of its parent, such as a button.
- No flicker read aloud
- The live letters are hidden; reduced motion shows the words at once.
Installation
pnpm dlx shadcn@latest add @caliper/scramble-text
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { ScrambleText } from "@/components/ui/scramble-text"
The worked example comes with Pro
The 31-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
ScrambleText
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-hidden in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Text loopOne word in a sentence that cycles through a few options. The widest word reserves the space, it pauses on hover, focus, off screen and in a hidden tab, and a pause button stops it.
- Slot textText whose characters roll like a slot machine when the value changes.
- Sand textText that dissolves like sand when it leaves and gathers when it returns.