Product Spin
A 360° viewer for a drawn product at stepped angles: drag with inertia, arrow keys, auto-spin, a degree readout and hotspots that appear when their side faces you.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| renderFrame | (angle: number) => ReactNode | — | Draws the object turned by angle degrees (a multiple of 360 / frames). |
| label | string | — | Product name; the accessible name of the viewer. |
| frames | number | 36 | Stepped angles in a full turn. |
| hotspots | ProductSpinHotspot[] | [] | Points ({ id, label, angle, y, radius? }) shown when their side faces you. |
| hotspotWindow | number | 50 | Degrees either side of facing that a hotspot stays visible. |
| defaultAutoSpin | boolean | false | Start spinning on its own (ignored under reduced motion). |
| defaultAngle | number | 0 | Starting angle in degrees. |
| size | number | 280 | Square stage size in px. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.