Card Metal Reflect

ProNew

A brushed-metal identity card with a broad reflection that glides across the surface and back, no camera needed, with an opt-in pointer tilt.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/card-metal-reflect

Prop	Type	Default	Description
`name`	`string`	`-`	Name printed on the card.
`position`	`string`	`-`	Line under the name.
`org`	`string`	`-`	Organisation engraved at the top.
`serial`	`string`	`-`	Identifier at the bottom.
`duration`	`number`	`6`	Seconds for the reflection to cross and return.
`tilt`	`boolean`	`false`	Opt in to a pointer-driven lean.

One transform animation moves the reflection back and forth; it pauses while the card is offscreen.
With prefers-reduced-motion: reduce the reflection rests on a still highlight and the tilt is switched off.
The brushed texture, reflection, chip and barcode are decorative and hidden from assistive technology.
Text is dark on a light metal gradient (contrast above 7:1).

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/card-metal-reflect

Prop	Type	Default	Description
`name`	`string`	`-`	Name printed on the card.
`position`	`string`	`-`	Line under the name.
`org`	`string`	`-`	Organisation engraved at the top.
`serial`	`string`	`-`	Identifier at the bottom.
`duration`	`number`	`6`	Seconds for the reflection to cross and return.
`tilt`	`boolean`	`false`	Opt in to a pointer-driven lean.

One transform animation moves the reflection back and forth; it pauses while the card is offscreen.
With prefers-reduced-motion: reduce the reflection rests on a still highlight and the tilt is switched off.
The brushed texture, reflection, chip and barcode are decorative and hidden from assistive technology.
Text is dark on a light metal gradient (contrast above 7:1).