Cipher Hover

`<pura-cipher-hover>` is the Evervault-style encrypted card: the surface is covered by pseudo-random characters that only appear under a radial spotlight following the cursor, and the characters rewrite on every throttled rAF frame while the pointer is over the card. It differs from `pura-scramble`, which decodes real text once; here the cipher never resolves, it is pure hover texture behind your real content. The field is seeded deterministically (`seed`), so SSR and client paint the same markup; `size` sets the spotlight diameter, `fps` the rewrite rate, and `static` keeps the field frozen while still revealing it. The character ink is a gradient (`--pura-cipher-hover-gradient`) clipped to the glyphs. The slotted content stays accessible above the decorative, `aria-hidden` cipher layer. Under reduced motion the scramble never starts and the card renders calm. Each instance registers in `window.__puraCipherHovers` by `data-pura-id` and mirrors state in `data-pura-cipher-*`.

Preview

<!-- encrypted card: characters appear under the cursor, rewriting per frame -->
<pura-cipher-hover style="background: #09090b;">
  <div style="min-height: 220px; display: grid; place-items: center; color: #fafafa;">
    <strong>hover me</strong>
  </div>
</pura-cipher-hover>

<!-- binary texture, wider spotlight, frozen field (no per-frame rewrite) -->
<pura-cipher-hover chars="01" size="320" seed="42" static
  style="--pura-cipher-hover-gradient: linear-gradient(120deg, #f472b6, #fb923c); background: #0c0a09;">
  <div style="min-height: 200px; padding: 24px; color: #fafaf9;">
    <h3 style="margin: 0;">Zero knowledge</h3>
    <p style="color: #a8a29e;">Your keys never leave the device.</p>
  </div>
</pura-cipher-hover>

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

import "./pura/lib/cipher-hover.js";