CardsProNew
Holographic Foil
A foil card like a collectible. It tilts after the cursor while foil bands and a glare slide across.
Customize
foilTint
foilTint2
foilHighlight
Based on Holographic Foil (MIT license) · Terms of use
Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| pattern | 'silver' | 'aurora' | 'gold' | 'oil' | 'prism' | "silver" | Foil material. |
| intensity | number | 0.6 | Foil strength, from 0 to 1. |
| glare | number | 0.5 | Glare strength, from 0 to 1. |
| sheenSpeed | number | 1 | Speed of the sheen that sweeps the card by itself. |
| tilt | boolean | true | Tilt the card after the cursor. |
| foilOver | boolean | false | Lay the foil over the content, e.g. over an image. |
| useDeviceOrientation | boolean | false | On phones, tilt with the gyroscope after asking permission. |
| children | ReactNode | — | Card content. |
| className | string | — | Classes for the wrapper. |
| foilTint | string | "#e5e5e5" | Main foil color. While all three colors are grey, the chosen pattern is used. Any vivid color prints the foil in your colors. |
| foilTint2 | string | "#a3a3a3" | Second color of the foil bands. |
| foilHighlight | string | "#ffffff" | The lightest band of the foil. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge