Folded Map
A drawn paper map folded in accordion panels that unfold in 3D on click or scroll, with shading on each fold and a route running across panels; a keyboard toggle, and flat and open under reduced motion.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The map art, drawn to fill panels × panelWidth by height. |
| label | string | — | Accessible description of the map. |
| panels | number | 4 | Number of accordion panels. |
| panelWidth | number | 120 | Width of one panel in px. |
| height | number | 220 | Map height in px. |
| trigger | "click" | "scroll" | "click" | Unfold on click (with a toggle button) or as the map scrolls into view. |
| defaultOpen | boolean | false | Start unfolded (click trigger). |
| onOpenChange | (open: boolean) => void | — | Called when the click trigger opens or closes the map. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.