KQ-615 · CARD/PIN
Card PIN
A PIN reveal you have to hold. Each cell is a two-face column that rolls its bullet away for its digit on snap, staggered by cascade so the four land one at a time, and rolls back in reverse when you let go. A ring inside the control drains linearly across the window from a motion value, ending the reveal on its own when it empties. Space held reveals while held, Enter latches the reveal for the whole window, and Escape closes it.
KQ-615 · CARD/PIN
Coldbrook Bank · Waylight cardending 4417
Card PIN6s window
Hold Space to show the PIN while held, or press Enter to keep it showing until the countdown ends. Enter again or Escape hides it.PIN hiddenPIN hidden · 0 reveals
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/card-pin
Props
- pin
- string
- default "4182"
- Digits to reveal; non-digits are stripped.
- holdFor
- number
- default 8000
- Milliseconds the reveal may stay open before the ring closes it.
- label
- string
- default "Card PIN"
- Names the group.
- holdLabel
- string
- default "Hold to show"
- Control copy while the PIN is hidden.
- shownLabel
- string
- default "Showing"
- Control copy while the PIN is showing.
- disabled
- boolean
- default false
- Locks the control.
- onRevealChange
- (revealed: boolean) => void
- default —
- Fires from the pointer, key or timeout that changed the reveal.
- onTimeout
- () => void
- default —
- Fires from the ring's completion, when the window runs out.
| Prop | Type | Default | Description |
|---|---|---|---|
| pin | string | "4182" | Digits to reveal; non-digits are stripped. |
| holdFor | number | 8000 | Milliseconds the reveal may stay open before the ring closes it. |
| label | string | "Card PIN" | Names the group. |
| holdLabel | string | "Hold to show" | Control copy while the PIN is hidden. |
| shownLabel | string | "Showing" | Control copy while the PIN is showing. |
| disabled | boolean | false | Locks the control. |
| onRevealChange | (revealed: boolean) => void | — | Fires from the pointer, key or timeout that changed the reveal. |
| onTimeout | () => void | — | Fires from the ring's completion, when the window runs out. |