Image Hotspots
A picture with breathing hotspot markers that open cards with details and an action, numbered tour mode and point-to-point paging.
Preview
Numbered tour
Numbered markers suit a guided walkthrough. Open one and step with the card arrows, or use ← → on a focused marker.Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| image | ReactNode | — | The picture: a drawn SVG or an <img> that fills its box. |
| alt | string | — | Text alternative for the picture. |
| hotspots | Hotspot[] | — | { id, x, y (percent), title, description?, meta?, footer? }. |
| aspect | number | 16 / 10 | Width / height of the picture. |
| numbered | boolean | false | Numbers in the markers, for guided tours. |
| open / defaultOpen / onOpenChange | string | null | null | The open hotspot id. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.