Pointer Gradient Text
A large headline filled with a soft ember-to-ink radial glow that follows the pointer on a spring, drifts when idle and centres on keyboard focus.
Preview
Field journal, issue 12
Light finds the
shape of things
Move the pointer anywhere on the page. Leave it still and the glow wanders on its own.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The headline text. |
| as | "h1" | "h2" | "h3" | "p" | "span" | "h2" | Element to render; the text stays real and selectable. |
| area | "self" | "window" | "self" | Track the pointer over the text only, or anywhere in the window. |
| radius | number | 0.45 | Glow width as a share of the text box. |
| idleAfter | number | 1.4 | Seconds without movement before the glow drifts on its own. |
| rest | { x: number; y: number } | { x: 30, y: 40 } | Starting point, and the fixed point under reduced motion (in %). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.