Depth Gallery
Drawn cards scattered at different depths that parallax with the pointer and scroll, with a card brought forward to centre on click or keys.
Preview
Choose a card to bring it forward.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DepthGalleryItem[] | — | Cards: { id, title, caption?, content }. Up to 8 in the scattered layout. |
| label | string | — | Accessible name of the gallery. |
| cardWidth | number | 136 | Card width in px. |
| parallax | number | 7 | Strength of the pointer and scroll parallax, in degrees of scene tilt. |
| selected | string | null | — | Forward card id (controlled). null for none. |
| defaultSelected | string | null | null | Initially forward card id. |
| onSelectedChange | (id: string | null) => void | — | Called when a card comes forward or goes back. |
| stageClassName | string | — | Classes for the 3D stage; set its height here (default h-96). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.