Text Mask Reveal
A big headline used as a mask over a drawn scene that slides and zooms through the letters on scroll or hover.
Preview
Golden hour.
Scroll inside the card: the scene slides through the letters.
Hover: follows the pointer
BLUEPRINTStripes
LaunchInstall
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The headline. |
| scene | "dusk" | "grid" | "stripes" | { image } | "dusk" | Drawn scene behind the letters, or your own CSS background-image. |
| trigger | "scroll" | "hover" | "scroll" | Scene slides with scroll, or toward the pointer. |
| container | RefObject<HTMLElement> | page | Scroll container (position: relative). |
| as | "span" | "h1" | "h2" | "h3" | "p" | "span" | Element to render. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.