Scan to lock

Use it for

• Document, ID and receipt capture flows
• Feature sections about extraction, OCR or verification
• Any check that should feel thorough before it says done

Avoid

• Real verification, where the timing must come from the actual check
• Long documents, where the sweep would take too long to read

How it works

The scan line is one linear CSS keyframe on top, keyed by a run counter so Replay restarts it. At the start of each run the component measures where every field row sits and schedules its highlight for the moment the line crosses it, so timing holds at any size. When the last field is found the padlock's shackle eases down with a translate and rotate transition and the body fills in.

Accessibility

Fields are a real description list, the Verified status is text in a polite live region, and Replay is a real button. Autoplay waits until the card is on screen. Reduced motion starts on the verified state, hides the scan line and drops the transitions, while Replay still steps through the fields.