Pop-out Card
A framed scene card whose subject stands up and grows out of the top of the frame on hover or focus, with a contact shadow; flat under reduced motion.
Preview
Field kit
Hover or focus to step out
Monstera, small
Held popped
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| background | ReactNode | — | The scene; it always stays inside the frame. |
| subject | ReactNode | — | The figure that rises out of the frame, anchored to its bottom edge. |
| title | string | — | Shown under the frame; also the accessible name. |
| description | ReactNode | — | Short line under the title. |
| width | number | 240 | Frame width in px; the frame is 1.15 × as tall. |
| pop | number | 1.28 | How far the subject grows out of the frame. |
| popped | boolean | false | Hold the popped state (ignored under reduced motion). |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.