Pixel Reveal

`<pura-pixel-reveal>` is the retro pixel-block transition: a shadow-DOM grid of square cells flickers in pseudo-random order to swap between two slotted states (default slot and `alt` slot) or, in `mode="reveal"`, to cover the content and snap off cell by cell, revealing it in pixel blocks. The scatter order is seeded deterministically per cell index (no Math.random), so server and client paint byte-identical grids and the whole effect runs on CSS keyframes and transitions with no per-frame JS. Trigger it by toggling the `active` attribute, by hover, or once on entering the viewport. Theme with `--pura-pixel-reveal-color` (cell color), `--pura-pixel-reveal-duration` (per-cell pop), and `--pura-pixel-reveal-stagger` (scatter spread); size the grid with `cols`/`rows`. SSR and pre-JS render state A fully visible with no cells shown; reduced motion skips the pixel pass and jumps straight to the final state. Each instance registers in `window.__puraPixelReveals` by `data-pura-id` with `{ mode, trigger, active, toggle }`.

Preview

<!-- hover swaps between two images under a retro pixel burst -->
<pura-pixel-reveal trigger="hover">
  <img src="/photos/before.jpg" alt="Before" />
  <img slot="alt" src="/photos/after.jpg" alt="After" />
</pura-pixel-reveal>

<!-- content dissolves out of pixel blocks when scrolled into view -->
<pura-pixel-reveal mode="reveal" trigger="view" cols="20" rows="12"
  style="--pura-pixel-reveal-color: #22c55e;">
  <h2>Chapter Two</h2>
</pura-pixel-reveal>

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

import "./pura/lib/pixel-reveal.js";