Magnetic grid
Grid of dots or glyphs that lean and swell toward the pointer on springs, with a click ripple and an optional rest point; still under reduced motion.
Preview
Dot field
Move across it. Click for a ripple.
Any glyph
Cells can render anything; here, plus marks that lean the same way.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns / rows | number | — | Size of the field. |
| gap | number | 28 | Px between cell centres. |
| radius / pull / swell | number | 120 / 8 / 0.9 | Pointer reach in px, max lean in px, and extra scale under the pointer. |
| renderCell | (index: number) => ReactNode | dot | Custom content for each cell (glyphs, marks). |
| ripple | boolean | true | Send a ripple through the field on click. |
| restPoint | [x, y] | — | Where the field leans when no pointer is over it, in px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.