KQ-611 · CARD/FACE
Card Face
A payment card whose reveal switch turns the whole slab on snap — a real rotateY with both faces backface-hidden — so the back arrives with one crisp overshoot. The full number un-masks digit by digit as the turn lands, a cascade of flicks that runs backwards when the card closes, and freezing settles a frost veneer on a tween that turns the card home and locks the switch. The control is a role="switch" button, so Space and Enter turn the card.
KQ-611 · CARD/FACE
Coldbrook Bank
Waylight virtual cardDetails hidden
Waylight card front · number masked · active
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/card-face
Props
- number
- string
- default "8412550722644417"
- Card number; non-digits are stripped and the rest padded to sixteen.
- revealed / defaultRevealed
- boolean
- default false
- Controlled or initial reveal state.
- onRevealedChange
- (revealed: boolean) => void
- default —
- Fires from the click on the reveal switch.
- frozen
- boolean
- default false
- Frosts the face, hides the details and locks the switch.
- holder
- string
- default "R. ALDERWICK"
- Name printed on both faces.
- expiry
- string
- default "04/29"
- Expiry exactly as printed.
- securityCode
- string
- default "418"
- Three or four digits on the signature panel.
- network
- string
- default "Waylight"
- Network wordmark on the front.
- label
- string
- default "Virtual card"
- Names the card group for assistive technology.
- revealLabel
- string
- default "Show card details"
- Reveal switch copy.
| Prop | Type | Default | Description |
|---|---|---|---|
| number | string | "8412550722644417" | Card number; non-digits are stripped and the rest padded to sixteen. |
| revealed / defaultRevealed | boolean | false | Controlled or initial reveal state. |
| onRevealedChange | (revealed: boolean) => void | — | Fires from the click on the reveal switch. |
| frozen | boolean | false | Frosts the face, hides the details and locks the switch. |
| holder | string | "R. ALDERWICK" | Name printed on both faces. |
| expiry | string | "04/29" | Expiry exactly as printed. |
| securityCode | string | "418" | Three or four digits on the signature panel. |
| network | string | "Waylight" | Network wordmark on the front. |
| label | string | "Virtual card" | Names the card group for assistive technology. |
| revealLabel | string | "Show card details" | Reveal switch copy. |