# Screens & States

A complete view of all screens the user may encounter during the Face Capture experience. Each state includes a brief description. Source of truth for layout, visual specs, interactions, and platform variations.

***

## Tutorial

Pre-capture instructional screen introducing the selfie step. Includes illustration/video and clear guidance before the camera opens.

<Image align="center" src="https://files.readme.io/d02e6c7825be9f1166393a43e3da9cfb8dea6d20b6b6e44f26bc7293a69ae9b5-Specs_1.png" />

<br />

## Permission Screens

Shown when camera permissions have not been granted. Includes pre-permission context, OS-specific instructions, and fallback steps if the system dialog is dismissed.

<Image align="center" src="https://files.readme.io/0e7cc5ef3b0331b8b3c128d9cb40d0f200081fa49ede281714f45a351bfd62b2-Specs_8.png" />

<br />

## Auto Capture

Automatic capture triggers when face alignment, lighting, and detection thresholds are met. This is the primary and recommended capture method.

<Image align="center" src="https://files.readme.io/3cbe46a5a2a1db84d4fcaaee4dd3c3efa467d2e9798979ee002d990b539f3f24-screens-and-states-3.png" />

<br />

## Manual Capture (Fallback)

Fallback option shown after a period of inactivity (default: 30 seconds) or when auto-capture cannot confidently detect a valid frame. Users can take the photo manually.

<Image align="center" src="https://files.readme.io/3254ed34dc36a0fe3539e60f3f2140bf355c99e51cb12b4fe4eb029a8810780b-Specs_3.png" />

<br />

## Feedback Messages (Real-Time Guidance)

Real-time, contextual guidance displayed while the camera is active. Helps users correct lighting, distance, positioning, and visibility issues to ensure a valid capture.

<Image align="center" src="https://files.readme.io/84b6e01bb6952ea6c293cd623b7b2ddacbc14ab156f00b945ee3026aa5618037-screens-and-states-5.png" />

<br />

## Uploading

Displayed while the captured selfie is uploaded and prepared for server-side validation. Prevents users from interacting until upload is complete.

<Image align="center" src="https://files.readme.io/895a25613577fed5278ec7c559f7faa90d0509c1f9d40467f5b4ef688f19ee37-screens-and-states-6.png" />

<br />

## Success

Shown when the selfie passes validation. The user can proceed to the next verification step without additional input.

<Image align="center" src="https://files.readme.io/9f687ac7ef63373154af0dfb6f031d19433ea92fdba45daccacacfa998647e11-screens-and-states-11.png" />

<br />

## Retry Errors

Displayed when validation fails but attempts remain. Provides specific corrective guidance and a retry CTA. Attempts reset after a successful capture.

<Image align="center" src="https://files.readme.io/1c60300b74981724af552c6a0be8c81106f02ee47b4e1efb90816b8165b4c098-Specs_6.png" />

<br />

## Final Errors (No Attempts Remaining)

Shown when all capture attempts have been used. The selfie is submitted for manual review, and the user may continue to the next step.

<Image align="center" src="https://files.readme.io/f83784cbeeea657e375ecb831dd5ea704c3fc46a3a1399151c5cc35171bacd84-Specs_7.png" />

<br />

## Connection Error

Displays when connectivity is lost during capture or upload. Users can retry once a stable connection is restored.

<Image align="center" src="https://files.readme.io/7087abf18968e85652d1c713615acb53915af941145b65318227440f45cb6534-Specs_9.png" />
