S09 Preview player
Play a prototype.
| Purpose | Play a prototype. |
| SRS | PRO-7, PRO-3, VAR-6 |
| Layout | Separate VS Code webview panel (opened with Ctrl+Alt+Enter or the header “Preview” button), drawn as 1440 × 900. Top bar 40: flow dropdown, device dropdown (with “Device frame” toggle), mode dropdown (color: Light), restart, “Hotspot hints” toggle, “Pin to selection” toggle, “Open in browser” button, frame counter “3 / 5”. Stage: background, device frame centred with the frame rendered at fit or 100 %. |
| States | Playing; hotspot hint (after a misclick, all hotspots flash focus 30 % for 600 ms); end of flow; pinned (follows the editor selection); external browser (same UI, served from localhost). |
Figma frame S09 (annotated)
Callouts:
- Player top bar: flow, device, restart, share, close
- Device frame playing the flow
- Hotspot hint on a misclick