Letter Hover
A line of type whose letters lift, grow and gain weight near the pointer on springs, with a sweep on keyboard focus.
Preview
Move the pointer across the line
Pebble notes, weeklyLetters near the pointer lift, grow and gain weight on springs. Tab to the link and a sweep runs across it instead.
Ember, wide reach
Tomás Ruiz
Weight runs 300 → 900 on Geist.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The line of type. |
| radius | number | 90 | Reach of the pointer in px. |
| lift / scale | number | 8 / 0.12 | Lift in px and extra scale of the nearest letter. |
| weight | [number, number] | [500, 720] | Weight at rest and at full reach (variable fonts). |
| focusSweep | boolean | true | Sweep across the line when its link or button gets keyboard focus. |
| 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.