Morph dialog
A card that morphs into a dialog through shared layout (surface, art, title, subtitle) with content fading in; Escape morphs back and returns focus; reduced motion crossfades.
Preview
Open a card
Held open (in a frame)
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open / defaultOpen / onOpenChange | boolean / boolean / (open: boolean) => void | — / false / — | MorphDialog: open state. |
| container | HTMLElement | null | page | MorphDialog: render inside this frame; null waits until it mounts. |
| modal | boolean | true | MorphDialog: trap focus; false for held previews (no autofocus at load). |
| MorphDialogTrigger / MorphDialogContent | motion element props | — | The card and the dialog surface; they share a managed layoutId. |
| MorphDialogArt / Title / Subtitle | motion div props | — | Parts that travel between card and dialog; Title names the dialog. |
| MorphDialogBody / MorphDialogClose | motion div / button props | — | Dialog-only content (fades in, describes the dialog) and the close key. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.