KQ-690 · DOC/SCAN
Doc Scan
A viewfinder for a hand-held identity document. Idle, the procedural card sits off centre and breathes; Capture settles it on glide while four corner brackets snap in from the frame's corners onto the card's on snap, then a bar sweeps the card on a linear tween and hands the capture to the host. Captured flashes once and stamps a check on recoil; blurred is the nudge, a filter blur, a sideways shake with no spring, released brackets and a Retry. One real button carries the whole flow for the keyboard, and the brackets are placed in percentages so the frame is sized by its container and never measured.
ready · hold the card in frame
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/doc-scan
Props
- status / defaultStatus
- DocScanStatus
- default "idle"
- Controlled or initial phase: idle, finding, scanning, captured or blurred.
- onStatusChange
- (status: DocScanStatus) => void
- default —
- Fires from Capture (to finding), from the brackets landing (to scanning) and from Retry.
- onScanned
- () => void
- default —
- Fires when the scan bar reaches the bottom; the host judges the capture and sets captured or blurred.
- title
- string
- default "Identity document"
- Printed on the procedural card and in the frame's accessible name.
- holder
- string
- default "A. Fernwork"
- Name line on the procedural card.
- label
- React.ReactNode
- default —
- Visible heading; omit it and pass aria-label.
| Prop | Type | Default | Description |
|---|---|---|---|
| status / defaultStatus | DocScanStatus | "idle" | Controlled or initial phase: idle, finding, scanning, captured or blurred. |
| onStatusChange | (status: DocScanStatus) => void | — | Fires from Capture (to finding), from the brackets landing (to scanning) and from Retry. |
| onScanned | () => void | — | Fires when the scan bar reaches the bottom; the host judges the capture and sets captured or blurred. |
| title | string | "Identity document" | Printed on the procedural card and in the frame's accessible name. |
| holder | string | "A. Fernwork" | Name line on the procedural card. |
| label | React.ReactNode | — | Visible heading; omit it and pass aria-label. |