KQ-1718 · SCREEN/PAIRING
Screen Pairing
A device-code sign-in for a shared screen: the code stands in wide tiles over an expiry bar that drains as one linear tween, and five waiting dots step along on the snap spring each time the screen polls. A new code stands up tile by tile on snap; when a poll approves, the dots light in a run on flick and the tiles drop away one by one on the exit ease while a clip sweeps the welcome open behind them, the avatar landing on recoil and the greeting settling on glide. Every action is a real button, the code is spoken one character at a time, and expiry, approval and new codes are announced once each.
KQ-1718 · SCREEN/PAIRING
Sign in to Harbour Room
On your phone or laptop, go to coldbrook.app/pair and enter this code.
WL5L2FWZ
Expires in 2:00Waiting for approval
Only enter a code you can see on this screen. Each code works once.
waiting · 0 checks · every 2 s
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/screen-pairing
Props
- code
- string
- default —
- The code your server issued for this screen. Omit it for a seeded placeholder of codeLength characters.
- codeLength
- number
- default 8
- Length of placeholder codes and loading outlines, 4 to 10. Tiles group in fours, threes or fives and wrap on narrow screens.
- tileStyle
- "flap" | "keycap" | "outline" | "solid"
- default "flap"
- How each character is drawn: a split-flap tile, a raised keycap, an accent outline or a solid accent tile.
- accent
- string
- default "var(--accent-bright)"
- Expiry bar, waiting dots, link underline, outline and solid tiles and the avatar; any CSS colour.
- expiresIn
- number
- default 300
- Seconds a code lives, counted from when it appears on screen.
- poll
- () => ScreenPairingAccount | null | Promise<ScreenPairingAccount | null>
- default —
- Asked every pollInterval while the code is live; resolve an account to sign the screen in. Each call steps the waiting dots.
- pollInterval
- number
- default 3000
- Milliseconds between polls.
- approved
- ScreenPairingAccount | null
- default —
- Controlled sign-in: an account shows the welcome, null shows the code. Leave undefined to let poll decide.
- onApproved
- (account: ScreenPairingAccount) => void
- default —
- Fires once, from the poll that approved the screen.
- onRefresh
- () => void
- default —
- A new code was asked for (New code, Get a new code, Try again). Placeholder codes roll by themselves.
- onExpire
- () => void
- default —
- Fires once when the code runs out.
- onSignOut
- () => void
- default —
- "Not you? Sign out" was pressed on the welcome; the screen returns to a fresh code.
- status
- "ready" | "loading" | "error"
- default "ready"
- Whether a code is ready: loading draws tile outlines, error offers Try again.
- room
- string
- default "Harbour Room"
- The screen's name, in the header and the headings.
- url
- string
- default "coldbrook.app/pair"
- Where people enter the code.
- now
- number
- default defaultScreenPairingNow
- The room clock in the header, ms since the epoch (shown in UTC).
- seed
- number
- default 7
- Seeds the placeholder codes.
- disabled
- boolean
- default false
- Pauses polling and the countdown and dims the screen.
- className
- string
- default —
- Classes for the outer panel.
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | — | The code your server issued for this screen. Omit it for a seeded placeholder of codeLength characters. |
| codeLength | number | 8 | Length of placeholder codes and loading outlines, 4 to 10. Tiles group in fours, threes or fives and wrap on narrow screens. |
| tileStyle | "flap" | "keycap" | "outline" | "solid" | "flap" | How each character is drawn: a split-flap tile, a raised keycap, an accent outline or a solid accent tile. |
| accent | string | "var(--accent-bright)" | Expiry bar, waiting dots, link underline, outline and solid tiles and the avatar; any CSS colour. |
| expiresIn | number | 300 | Seconds a code lives, counted from when it appears on screen. |
| poll | () => ScreenPairingAccount | null | Promise<ScreenPairingAccount | null> | — | Asked every pollInterval while the code is live; resolve an account to sign the screen in. Each call steps the waiting dots. |
| pollInterval | number | 3000 | Milliseconds between polls. |
| approved | ScreenPairingAccount | null | — | Controlled sign-in: an account shows the welcome, null shows the code. Leave undefined to let poll decide. |
| onApproved | (account: ScreenPairingAccount) => void | — | Fires once, from the poll that approved the screen. |
| onRefresh | () => void | — | A new code was asked for (New code, Get a new code, Try again). Placeholder codes roll by themselves. |
| onExpire | () => void | — | Fires once when the code runs out. |
| onSignOut | () => void | — | "Not you? Sign out" was pressed on the welcome; the screen returns to a fresh code. |
| status | "ready" | "loading" | "error" | "ready" | Whether a code is ready: loading draws tile outlines, error offers Try again. |
| room | string | "Harbour Room" | The screen's name, in the header and the headings. |
| url | string | "coldbrook.app/pair" | Where people enter the code. |
| now | number | defaultScreenPairingNow | The room clock in the header, ms since the epoch (shown in UTC). |
| seed | number | 7 | Seeds the placeholder codes. |
| disabled | boolean | false | Pauses polling and the countdown and dims the screen. |
| className | string | — | Classes for the outer panel. |