hermes/docs/mobile-fullscreen-round-flow.md

Mobile Fullscreen Round Flow

This document is the interaction contract for the TikTok-style round flow.

Entry

• App opens directly into the round experience in Demo mode by default.
• Demo mode must not require account creation or login.
• Demo mode must not rely on backend round selection or reveal transitions.

Demo Assets

• Preview clip: example-round.mov
• Reveal clip: example-reveal.mov
• On iOS these files are bundled into the app and used locally.

Round Flow

1. Start fullscreen preview playback immediately.
2. Show the event prompt at the top, driven by event type or questionKey.
3. Show a shrinking half-circle timer based on the preview clip duration.
4. Allow swipe anywhere on the screen while preview is active.
5. Use Tinder directions: right swipe = first/yes outcome left swipe = second/no outcome
6. When dragging, tint the side being chosen: right side = green left side = red
7. Do not show bottom swipe buttons or button-like selection panels during preview.
8. After selection, do not jump ahead in the preview clip.
9. Instead, keep playing the current preview clip at accelerated speed.
10. Only when the preview clip finishes should reveal playback start.
11. Reveal playback uses the reveal clip and then transitions into the result state.

Locking

• If the timer reaches zero before a selection, freeze the current preview frame.
• Locked-without-selection must not auto-reveal.
• In demo mode, selection acceptance is local.
• In live mode, selection still goes through backend acceptance.

Android Follow-Up

Android should match the iOS behavior exactly:

• direct demo-mode entry
• no backend dependency in demo mode
• fullscreen preview surface
• timer derived from preview clip length
• side tint feedback instead of bottom buttons
• accelerated preview continuation after selection
• reveal starts only after the preview clip actually ends