# Screens & States

A complete view of all screens the user may encounter during the ID Capture experience. Each state includes a brief description and optionally a link to its source in Figma or screen-specs.

***

## Tutorial

Introductory screen shown before the camera opens. It sets expectations (flat surface, good lighting, show full ID, avoid glare) and include an short animation.

<Image align="center" border={false} src="https://files.readme.io/8a0c189c0691663ca84fc0c72e09c6c224bfc5b9c80bc734915b9d0da8e01d9e-screens-and-states-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" border={false} src="https://files.readme.io/0e7cc5ef3b0331b8b3c128d9cb40d0f200081fa49ede281714f45a351bfd62b2-Specs_8.png" />

<br />

## Auto Capture

Primary capture method for the **ID Capture**. The camera view is active and the system monitors real-time quality gates (glare, cut-off, blur, edge visibility, barcode/MRZ presence if applicable). When all thresholds are met, the photo is captured automatically.

<Image align="center" border={false} src="https://files.readme.io/b234c276522f5e518c5ccd794808228418e0db46cec528c623645bd8586beee2-screens-and-states-3.png" />

<br />

## Manual Capture (Fallback)

If auto-capture doesn’t trigger (e.g., complex lighting, slow device, user delay) then after a timeout a manual capture button is shown and user can tap to take photo themselves.

<Image align="center" border={false} src="https://files.readme.io/3651521dd79a0431d34d3ada1a9914dc095e437e78d05e73e526f574da719a36-screens-and-states-4.png" />

<br />

## Feedback Messages (Real-Time Guidance)

While the camera is active, real-time messages guide the user to correct issues such as: “Move closer”, “Avoid glare”, “Show all four corners”, “Flip to back side”, etc.

<Image align="center" border={false} src="https://files.readme.io/9897c6de8cdad422f859614ac8e84b5a37bd9efd44711d38d0d92418e66fe2dd-screens-and-states-5.png" />

<br />

## Analyzing

After capture (front/back) the images are being uploaded and processed (OCR, authenticity check). During this stage the UI prevents further interaction and shows progress.

<Image align="center" border={false} src="https://files.readme.io/8f9fdb3784abfc744501b9055bb302b84f77fb5f0e80e4c106de4b0ae929dcfa-screens-and-states-6.png" />

<br />

## Success

When the images pass quality checks and upload/processing succeeds, the user sees a success screen. The user can proceed to the next verification step without additional input.

<Image align="center" border={false} src="https://files.readme.io/68d1bd89ed30667ffb17912f5f436fc54d45556cdb099f4b9911bcd897e14e25-screens-and-states-11.png" />

<br />

## Retry Errors

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

<Image align="center" border={false} src="https://files.readme.io/8c84bf2331aa74f6a5dc914b4de2bb20e70b136c86b6969e12d5b0a1bf5ff096-screens-and-states-8.png" />

<br />

<br />

## Document Not Accepted Errors

Document Not Accepted is a screen shown when the user’s ID can’t be verified—for example, due to an expired ID document or an unsupported document type. It displays a list of accepted documents for that country so the user can see which types are valid for verification.

<Image align="center" border={false} src="https://files.readme.io/214ef37696d1bcaed1197a5b9d99fbde30349cbc3760282b48991f6aab6a1814-screens-and-states-7.png" />

<br />

## Final Errors (No Attempts Remaining)

When all permitted attempts are exhausted, this screen indicates that manual review will follow (or next steps if applicable).

<Image align="center" border={false} src="https://files.readme.io/498e7d0753995b11315f25d2bf78ceabce3be531d96e14021491c91125d6d00d-screens-and-states-12.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" border={false} src="https://files.readme.io/7087abf18968e85652d1c713615acb53915af941145b65318227440f45cb6534-Specs_9.png" />
