Outline Text
Big display text drawn as a clean outline that fills with a clip sweep on hover, in view or on mount.
Preview
Fills as it scrolls into view
Made slowly.
Shipped often.
Selected work · hover or tab
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Display text. |
| trigger | "hover" | "inView" | "mount" | "hover" | Fill on hover or focus (of the text or its link), on first view, or on mount. |
| direction | "right" | "up" | "right" | Which way the fill sweeps. |
| tone | "ink" | "ember" | "ink" | Outline and fill colour. |
| stroke | number | 1.25 | Outline width in px. |
| duration | number | 0.6 | Seconds to fill. |
| surface | string | "var(--card)" | Colour behind the text; hides variable-font seams in the outline. |
| 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.