QR / Barcode Scanner

Design the live scanner camera screen for QR and barcode capture. The viewfinder is the main surface: a reticle sits over the camera feed and helps the user aim at a code quickly.

When a code is recognized, surface a result chip or action without burying the camera view. The transition from scanning to detected should feel immediate, with the code content visible enough to trust.

This is a mobile camera task, so the preview, reticle, and result treatment need to work in one handed use. Keep the camera active while the result appears, so the user can confirm before acting.

Make the detected state specific to the code type and outcome. A URL, contact card, or product code may need different labels or actions, but the scanner frame should stay the same.

Use the reticle as the anchor for feedback: pulse, lock, then place the result chip close to it so detection feels tied to what the camera just found.