Reveal Text
Split text that rises out of a blur or slides up from a mask, by word, character or line, on mount or in view.
Preview
Quarterly letter · Q3
Small teams, steady releases, fewer late nights.
Words rise out of a soft blur, one after another, then settle.
We stopped shipping on Fridays
and started shipping every day.
Nothing broke more often.Mask, by word
Deploys up 3.4×Each word slides up from behind its own edge.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text to reveal; \n separates lines. |
| split | "word" | "char" | "line" | "word" | Unit that animates. |
| variant | "rise" | "mask" | "rise" | Fade up out of a blur, or slide up from behind a clip edge. |
| trigger | "mount" | "inView" | "mount" | Start on mount, or once when 40% of it scrolls into view. |
| stagger | number | 0.06 word / 0.025 char / 0.12 line | Seconds between units, capped so the whole reveal stays near 1.2 s. |
| delay | number | 0 | Seconds before the first unit. |
| duration | number | 0.55 rise / 0.7 mask | Seconds per unit. |
| as | "span" | "div" | "p" | "h1" | "h2" | "h3" | "blockquote" | "span" | Element to render. |
| onComplete | () => void | — | Called after the last unit lands. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.