Door Reveal
A card whose two shaded doors swing open in 3D on hover, focus or click to reveal content inside, fading instead under reduced motion.
Preview
This week
30% off
Annual Studio plans, until Sunday.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | What is behind the doors. |
| label | string | — | Words on the closed doors; also names the toggle. |
| hint | string | — | Small line under the label on the doors. |
| tone | "ink" | "paper" | "ember" | "ink" | Door colour, from tokens. |
| openOnHover | boolean | true | Also open while a mouse hovers or focus is inside. |
| open | boolean | — | Controlled open (pinned) state. |
| defaultOpen | boolean | false | Initial open state. |
| onOpenChange | (open: boolean) => void | — | Called when the doors are opened or closed by click or keyboard. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.