How Do You Build a "Tap Who Sits Where" Picker for a Five-Spot AI Video? Normalized Hotspots, 44px Targets and Keyboard Order (Tested JS)

Description and use

Building a tap‑based role picker for a 9:16 AI video: normalized hotspots, 44 px minimum target, keyboard support.

Problem

Implement a tap‑based role picker that maps user taps on a 9:16 video frame to predefined role IDs, ensuring consistent behavior across devices and input methods.

Outcome

The picker reliably maps taps to role IDs across devices, enforces a minimum touch target of 44px, and supports keyboard navigation, improving user experience and reducing errors.

Workflow

• Define role hotspots in normalized coordinates (cx, cy, r) relative to a 9:16 frame.
• Implement hitTest to convert clientX/Y to normalized fractions, clamp radius to a minimum 44px, and select the nearest hotspot.
• Render the hotspots as invisible buttons overlaying the image for keyboard and screen‑reader support.
• Attach event listeners for touch and keyboard events to trigger hitTest and update role assignments.
• Provide visual feedback (e.g., labels) and a preview of the selected performers before finalizing.
• Run automated tests with node --test to verify hitTest accuracy across screen sizes.

Evidence

Store each spot as a circle in fractions of the frame, not in pixels. The frame is always 9:16

Source

Clamp the radius to a minimum touch size. On a small embedded preview, 0.10 × 180px is an 18px radius, a 36px target. The clamp keeps it at 44px across.

Source

Nearest centre wins. Back-row spots sit close to the lead. Without a tie‑break, whichever spot comes first in the array silently wins every overlap.

Source