Sheen / Glare Hover

`<pura-sheen>` is the glare hover: a diagonal light streak sweeps across the slotted content once when the pointer enters, without tilting anything. It is the flat counterpart to `<pura-tilt glare>`, made for buttons, cards and images. The streak is a translucent linear-gradient overlay parked off-frame; hovering (or focusing inside) transitions its transform across the surface exactly once, and leaving resets it instantly for the next pass. `duration` and `angle` shape the sweep, `loop` makes it ambient (sweeping continuously, gated behind `prefers-reduced-motion: no-preference`), and `sheen.sweep()` triggers a pass programmatically. Tune the look with `--pura-sheen-color`, `--pura-sheen-width` and `--pura-sheen-radius`. SSR and reduced motion render the content with the streak off-frame, fully static. Each instance registers in `window.__puraSheens` by `data-pura-id` with `{ duration, angle, sweep }`.

Preview

<!-- one diagonal glare pass per hover, no tilt -->
<pura-sheen style="--pura-sheen-radius: 14px;">
  <img src="/photos/card.jpg" alt="Product" />
</pura-sheen>

<!-- faster, steeper sweep on a button; ambient loop on a banner -->
<pura-sheen duration="500" angle="100" style="--pura-sheen-color: rgba(255,255,255,0.3);">
  <button class="cta">Buy now</button>
</pura-sheen>
<pura-sheen loop duration="1500" style="--pura-sheen-width: 10%;">
  <div class="banner">Limited offer</div>
</pura-sheen>

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

import "./pura/lib/sheen.js";