KQ-1615 · STEEL/CARD

Steel Card

A payment card in brushed metal: the brushing is fractal noise stretched along brushAngle in overlay, and its anisotropic highlight is a long streak across the grain that slides along it and turns with the tilt as the card leans toward the pointer on the glide spring. Flick it and it falls back onto the table under gravity, pivoting on its bottom edge, lands flat with one or two bounces set by bounce and a clink, then rights itself on the glide spring after rightAfter ms. Focus tilts it into a three-quarter pose, arrow keys lean it, Enter or Space drop it and Escape rights it at once.

KQ-1615 · STEEL/CARD

Coldbrook · metal card

Ready to ship

in hand · steel, brushed 0°

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/steel-card

Props

name: string; default "Ada Lindqvist"; The cardholder's name, etched along the bottom.
number: string; default "9404 1728 3356 0812"; The card number, etched in groups of four.
expiry: string; default "09/29"; Expiry, as printed.
issuer: string; default "Coldbrook"; The issuer's wordmark, top left.
metal: "steel" | "titanium" | "gold" | "black"; default "steel"; The metal; black steel is etched bright.
brushAngle: number; default 0; Direction of the brushing, degrees from horizontal.
edge: "bevel" | "flat" | "gilt" | "ink"; default "bevel"; The edge: a polished bevel, a flat cut, a gilt edge or an ink-black one.
tilt: number; default 14; How far the card tilts toward the pointer, degrees.
gloss: number; default 0.7; Strength of the brushed highlight, 0 to 1.
bounce: number; default 0.35; How much of its speed the card keeps when it hits the table, 0 to 1.
rightAfter: number; default 900; How long the card lies on the table before it rights itself, ms.
mask: boolean; default false; Show only the last four digits.
chip: boolean; default true; Draw the contact chip.
contactless: boolean; default true; Draw the contactless mark.
sound: boolean; default false; Play the clink when it lands.
onDrop: () => void; default —; Fires when a flick, Enter or Space drops the card.
label: string; default issuer, metal, last four and name; The card's accessible name.
disabled: boolean; default false; No tilting, dropping or keys.
className: string; default —; Sizes the stage; the card is up to 280px wide and centred.

Prop	Type	Default	Description
name	string	"Ada Lindqvist"	The cardholder's name, etched along the bottom.
number	string	"9404 1728 3356 0812"	The card number, etched in groups of four.
expiry	string	"09/29"	Expiry, as printed.
issuer	string	"Coldbrook"	The issuer's wordmark, top left.
metal	"steel" \| "titanium" \| "gold" \| "black"	"steel"	The metal; black steel is etched bright.
brushAngle	number	0	Direction of the brushing, degrees from horizontal.
edge	"bevel" \| "flat" \| "gilt" \| "ink"	"bevel"	The edge: a polished bevel, a flat cut, a gilt edge or an ink-black one.
tilt	number	14	How far the card tilts toward the pointer, degrees.
gloss	number	0.7	Strength of the brushed highlight, 0 to 1.
bounce	number	0.35	How much of its speed the card keeps when it hits the table, 0 to 1.
rightAfter	number	900	How long the card lies on the table before it rights itself, ms.
mask	boolean	false	Show only the last four digits.
chip	boolean	true	Draw the contact chip.
contactless	boolean	true	Draw the contactless mark.
sound	boolean	false	Play the clink when it lands.
onDrop	() => void	—	Fires when a flick, Enter or Space drops the card.
label	string	issuer, metal, last four and name	The card's accessible name.
disabled	boolean	false	No tilting, dropping or keys.
className	string	—	Sizes the stage; the card is up to 280px wide and centred.