The kiosk phone is mounted on a wall with no physical UI to confirm
'this is the scanner' — without the overlay the camera feed alone
is a confusing blank screen. Now the scanner paints:
* a centred orange-cornered viewfinder (the QR alignment frame)
* a black vignette dimming everything outside that frame
(achieved via a 9999px box-shadow on the viewfinder, the
cleanest way to punch a rounded hole in an overlay without SVG
mask math)
* an orange scan line sweeping top-to-bottom inside the frame
(transform-based keyframes, pauses under prefers-reduced-motion)
* a pulsing 'Scanning for badge' status pill at the top
* a one-line 'Hold the QR badge steady inside the frame' hint
at the bottom
Everything is pointer-events-none so touches still reach the
camera. The overlay hides during the green/blue/red result banners
so it doesn't compete with the success message.
|
||
|---|---|---|
| .. | ||
| apple-icon.png | ||
| clock-view.tsx | ||
| layout.tsx | ||
| opengraph-image.alt.txt | ||
| opengraph-image.png | ||
| page.tsx | ||
| person-scanner.tsx | ||