Card Foil Shimmer

ProNew

A collectible-style card with a foil layer and a bright band that sweeps across it on a timer, 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-foil-shimmer

Prop	Type	Default	Description
`eyebrow`	`string`	`-`	Small label above the title.
`title`	`ReactNode`	`-`	Main line of the card.
`detail`	`ReactNode`	`-`	Supporting text.
`serial`	`string`	`-`	Serial line at the bottom.
`interval`	`number`	`5`	Seconds from the start of one sweep to the next.
`tilt`	`boolean`	`false`	Opt in to a pointer-driven lean.
`className`	`string`	`-`	Classes for the card.

The sweep is one transform animation on a single layer, paused while the card is offscreen.
With prefers-reduced-motion: reduce the sweep stops on a still highlight and the tilt is switched off.
The foil, grain and sweep layers are decorative and hidden from assistive technology.
Text sits on the card surface, not on the moving band, and keeps theme contrast.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/card-foil-shimmer

Prop	Type	Default	Description
`eyebrow`	`string`	`-`	Small label above the title.
`title`	`ReactNode`	`-`	Main line of the card.
`detail`	`ReactNode`	`-`	Supporting text.
`serial`	`string`	`-`	Serial line at the bottom.
`interval`	`number`	`5`	Seconds from the start of one sweep to the next.
`tilt`	`boolean`	`false`	Opt in to a pointer-driven lean.
`className`	`string`	`-`	Classes for the card.

The sweep is one transform animation on a single layer, paused while the card is offscreen.
With prefers-reduced-motion: reduce the sweep stops on a still highlight and the tilt is switched off.
The foil, grain and sweep layers are decorative and hidden from assistive technology.
Text sits on the card surface, not on the moving band, and keeps theme contrast.