Variable Text
Text whose variable font weight follows pointer distance, scroll position or a slider value.
Preview
Weight is a dial.
Pointer: closer is heavier
Come closerScroll weight
Heaviest at the middle of the box.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text. |
| mode | "pointer" | "scroll" | "value" | "pointer" | Weight follows pointer distance, scroll position or the value prop. |
| value | number | 0 | 0–1 in value mode. |
| weight | [number, number] | [300, 800] | Range on the font's wght axis. |
| reach / container | number / RefObject<HTMLElement> | 360 / page | Pointer reach in px; 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.