# Scanner Frame

> A beam sweeping over content while it is checked.

Corner sights, a trailing glow and a result once it stops. For document checks, uploads, ID capture and game scans.

- Family: Chrome
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/scanner-frame/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add scanner-frame
```

It installs to `components/galactrex/scanner-frame.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { ScannerFrame } from "@/components/galactrex/scanner-frame";

<ScannerFrame scanning={checking} result="Verified"><Document /></ScannerFrame>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | What is scanned. |
| `scanning` | `boolean` | `true` | Sweeping while true. |
| `result` | `ReactNode` | — | Shown once it stops. |
| `duration` | `number` | `2.2` | Seconds per pass. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Verify.** Scan, then 'Verified'.

## Accessibility

- A status region announces Scanning and the result.

## Motion

- One container-sized transform; pauses offscreen.
- Reduced motion: no beam.