Flickering Grid

`<pura-flickering-grid>` paints a grid of small squares behind its slotted content where individual cells light up and dim back down at staggered times, the classic backdrop for mockups and CTAs. Unlike `<pura-grid-pattern>`, which sweeps one continuous glow across static lines, every cell here flickers on its own schedule. All delays, durations and resting opacities are derived from deterministic `seed` + index math in the pure template, so the server and client paint byte-identical fields and the whole effect is CSS `@keyframes` with no per-frame JS. A gradient `mask` (radial, top, bottom or none) fades the field toward the edges; `columns`, `rows`, `speed` and `color` shape the look, and `--pura-flickering-grid-*` tokens tune gap, radius, color and peak opacity. Reduced motion gets the same grid frozen with varied cell opacities. Each instance registers in `window.__puraFlickeringGrids` by `data-pura-id`.

Preview

<!-- CTA on a flickering backdrop, default radial fade -->
<pura-flickering-grid columns="32" rows="16" style="height: 320px; background: #09090b;">
  <div class="cta">
    <h2>Start building today</h2>
    <a href="/signup">Create account</a>
  </div>
</pura-flickering-grid>

<!-- slow green grid fading downward behind a product mockup -->
<pura-flickering-grid color="#22c55e" speed="slow" mask="top" seed="7"
  style="--pura-flickering-grid-gap: 4px; --pura-flickering-grid-max-opacity: 0.7;">
  <img src="https://picsum.photos/seed/mockup/900/500" alt="Product dashboard" style="display: block; width: 80%; margin: 48px auto; border-radius: 12px;" />
</pura-flickering-grid>

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

import "./pura/lib/flickering-grid.js";