Rotating Badge
A 3D badge or seal that tilts with a holographic foil sheen following the pointer and flips to its back on click.
Preview
Move the pointer over a badge to tilt it and catch the foil; click to flip it.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| front | ReactNode | — | Front face content. |
| back | ReactNode | — | Back face content, shown after a click. |
| label | string | — | Accessible name; the side showing is appended. |
| shape | "circle" | "seal" | "seal" | Outline: a round badge or a scalloped seal. |
| size | number | 168 | Diameter in px. |
| tone | "ember" | "ink" | "paper" | "ember" | Base colour from theme tokens. |
| maxTilt | number | 16 | Largest tilt towards the pointer, in degrees. |
| defaultFlipped | boolean | false | Show the back initially. |
| onFlippedChange | (flipped: boolean) => void | — | Called when the badge flips. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.