Magic Card

`<pura-magic-card>` lights its gradient border and casts a soft radial spotlight that follows the pointer across the card, in the style of Magic UI's Magic Card. The resting paint (centred and dimmed) is rendered by the pure template, so it is SSR-safe; on the client the element updates `--pura-magic-x` and `--pura-magic-y` on pointer move to steer the glow. Theme it with `--pura-magic-card-bg`, `--pura-magic-card-border`, `--pura-magic-card-glow`, and `--pura-magic-card-size`. Because the glow is pointer-driven rather than a keyframe, it simply rests when the pointer leaves. It registers in `window.__puraMagicCards` by `data-pura-id` for agent enumeration.

Preview

<pura-magic-card>
  <div class="card-body">Hover me</div>
</pura-magic-card>

<!-- Custom palette -->
<pura-magic-card style="--pura-magic-card-bg: #0b0b12; --pura-magic-card-border: #06b6d4; --pura-magic-card-glow: rgba(6,182,212,.22);">
  <div class="card-body">Cyan magic</div>
</pura-magic-card>

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

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