Perspective Showcase
A product screen in perspective that straightens as it scrolls into view, with callout chips rising to different depths.
Preview
Revenue analytics
Your numbers, the moment they change
Scroll this panel: the screen straightens.
app.example · Revenue
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The product screen, composed from your components. |
| callouts | ShowcaseCallout[] | [] | Floating chips: { id, label, x, y, depth?, icon? } with x and y in % of the screen. |
| tilt | number | 26 | Starting tilt in degrees, before the screen scrolls into view. |
| scrollContainer | RefObject<HTMLElement | null> | — | Scrollable ancestor to track instead of the window (give it position: relative). |
| caption | ReactNode | — | Caption under the screen; also names the figure. |
| windowTitle | string | — | Title in the window frame's top bar. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.