Holo Card

`<pura-holo-card>` lays a holographic foil over its content, in the style of a rare trading card: an iridescent rainbow gradient and a soft glare slide across the surface as the pointer moves, optionally combined with a light 3D tilt (`tilt`) or a glittery dot layer (`sparkle`). Unlike `<pura-magic-card>`, which lights a gradient border and a spotlight, the whole face shimmers here via blended gradient overlays whose `background-position` is steered by `--pura-holo-mx` / `--pura-holo-my` on pointer move. The resting paint (centred, dimmed sheen, no glare) is rendered by the pure template, so SSR looks finished without JS, and reduced motion keeps that resting state. Theme it with `--pura-holo-card-radius` and `--pura-holo-card-bg`; internal layers are exposed as `part="frame"`, `part="foil"`, `part="sparkle"`, and `part="glare"`. Each instance registers in `window.__puraHoloCards` by `data-pura-id`. For spring-physics tilt, wrap it in `<pura-tilt>` instead of using the built-in `tilt`.

Preview

<!-- basic foil shimmer over any card content -->
<pura-holo-card>
  <div class="card-body">
    <img src="/art/dragon.jpg" alt="Dragon" />
    <h3>Aurora Drake</h3>
  </div>
</pura-holo-card>

<!-- stronger foil, glitter and built-in tilt, custom shape -->
<pura-holo-card intensity="0.9" angle="135" tilt="8" sparkle
  style="--pura-holo-card-radius: 20px; --pura-holo-card-bg: #0b0b12;">
  <div class="profile">
    <img src="https://picsum.photos/seed/profile/480/480" alt="Avatar" />
    <h3>Lena Costa</h3>
    <p>Product designer</p>
  </div>
</pura-holo-card>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/holo-card.js"></script>

import "./pura/lib/holo-card.js";