Hum Rahi

────────────────────────────────────────────────────────────
US-028.DESIGN.1 — Hold-to-Activate Interaction Design & Countdown Ring Spec
────────────────────────────────────────────────────────────

Role
As a product designer for Ham Rahi,
I need to define the visual language, motion behaviour, and interaction
states for the SOS hold-to-activate control,
So that the frontend team can implement a consistent, accessible, and
panic-resistant activation experience.

User Story
As Priya,
I want the SOS button to require a deliberate 5-second sustained press
before activation, with a clear animated countdown ring showing my progress,
So that I do not trigger a false emergency by accidentally touching the button,
and I know exactly when the SOS will fire.

In-Scope

• Design specification for the SOS button resting state (idle)
• Design specification for all intermediate hold states (0 s through 5 s)
• Animated circular countdown ring behaviour: stroke fill progression, colour
  transitions, timing easing
• Countdown numeral or tick display inside the ring (if applicable)
• Haptic feedback specification: pattern and timing mapped to each hold stage
• Visual and motion spec for premature release (incomplete hold — reset animation)
• Visual and motion spec for successful completion (5-second hold fully satisfied)
• Cancelled / interrupted state (user lifts finger before 5 s)
• Accessibility spec: minimum touch target size, colour contrast ratios,
  motion-reduced fallback for users with vestibular sensitivity settings enabled
• Design handoff artefact (annotated screens + component states in Figma or
  equivalent) covering all states above

Out-of-Scope

• Backend SOS trigger logic or WebRTC session initiation (covered in
  US-029 and downstream BE stories)
• Audio alert or siren design (separate story under F3)
• Police panel UI response design
• Any design work related to the Women Safety Companion SOS variant
  (separate epic)
• Prototype animation — specification only is required at this stage

Acceptance Criteria

AC1 The design spec defines a single, prominent SOS button that is
visually distinct from all other UI elements on the screen; it must
not be reachable by casual single-tap or swipe navigation.

AC2 The spec documents a circular countdown ring that originates at the
12 o'clock position and fills clockwise over exactly 5 seconds, with
the stroke completing a full 360-degree arc at the moment of activation.

AC3 The ring animation uses a linear or near-linear progression (no
sudden jumps); the spec defines the easing curve and total duration
explicitly so frontend implementation is unambiguous.

AC4 The design provides a minimum of four discrete visual states:
(a) Idle — no hold detected,
(b) Holding — ring progressing, hold is active,
(c) Released early — ring resets, no activation,
(d) Activated — ring completes, SOS fires.

AC5 Colour contrast for all text and ring stroke elements against their
backgrounds meets WCAG AA (4.5:1 for text, 3:1 for graphical
components).

AC6 The minimum touch target for the SOS button is specified at no less
than 48 × 48 dp to comply with accessibility guidelines.

AC7 A haptic feedback pattern is specified for at least three moments:
hold start, each full second elapsed, and activation complete.

AC8 A motion-reduced fallback state is documented for users who have
reduced-motion or accessibility settings enabled on their device;
the fallback must still clearly communicate hold progress without
relying solely on animation.

AC9 The design handoff artefact is reviewed and signed off by the CTO
(Fiza Khan) before the FRONTEND story (US-028.FE.1) enters
development.

Definition of Done

• All interaction states are documented in the design tool with annotations
• Haptic pattern is described in writing alongside the visual spec
• Accessibility annotations (contrast ratios, touch target sizes) are
  attached to the handoff file
• Spec has passed internal design review
• CTO sign-off obtained
• Handoff file is linked in the Redmine ticket for US-028.FE.1