Loading…
Live component · try it
Premiumcard · hover · dark
Holographic Foil Card
A collectible-style card with a foil finish: tilt it with the pointer and a rainbow sheen sweeps across in bands, a fine sparkle pattern glints where the light hits, and the card itself leans with the hand. At rest it is matte.
The mechanic
`.rainbow` background `conic-gradient(from var(--a), #f0f 0, #0ff 25%, #ff0 50%, #f0f 75%, #0ff 100%)` sized 200 % and positioned at `(x, y)`; `mix-blend-mode: color-dodge`, opacity 0.6 when live. `.glint` is `repeating-linear-gradient(115deg, #fff0 0 6px, #fff8 7px, #fff0 8px)` with `background-position` at `(2x, 2y)` and `mix-blend-mode: overlay`. Both are masked to a soft radial so edges stay matte. Tilt is ±10° from the pointer.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
