Scramble Text
Text that cycles through glyphs and resolves left to right on mount, hover, in view or value change, without changing width.
Preview
Release 4.2 · now shipping
Interfaces that resolve into place.
Each glyph keeps the width of its final letter, so the line never jumps while it decodes.
web-checkout
a41f9c2 · main
- Queued
- Building
- Checking
- Live
Status swaps scramble from the old word into the new one.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The final text. |
| trigger | "mount" | "hover" | "inView" | "change" | "mount" | What starts a scramble. hover also listens on the nearest link or button; change scrambles into new text. |
| charset | string | A–Z, 0–9, symbols | Glyphs to cycle through. SCRAMBLE_CHARSETS has letters, symbols, binary, blocks. |
| duration | number | 800 | ms until the last character resolves. |
| tick | number | 40 | ms between glyph changes. |
| delay | number | 0 | ms before starting. |
| as | "span" | "div" | "p" | "h1" | "h2" | "h3" | "strong" | "span" | Element to render. |
| scrambleClassName | string | "text-muted-foreground" | Classes for glyphs that have not resolved yet. |
| onComplete | () => void | — | Called when the text has resolved. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.