Grid Pattern

`<pura-grid-pattern>` lays a tiled grid behind its slotted content and sweeps a glowing patch across it, in the style of Magic UI's (Animated) Grid Pattern. A dim base grid is always visible; a brighter copy is revealed through a moving radial mask, so the motion is one pure CSS `@keyframes` with no animation runtime. Add the `dots` attribute for a dot grid, and theme with `--pura-grid-line`, `--pura-grid-glow`, `--pura-grid-cell`, `--pura-grid-spot` (glow size), and `--pura-grid-duration`. Under reduced motion the glow rests in one spot via the base reset. It registers in `window.__puraGridPatterns` by `data-pura-id` for agent enumeration.

Preview

<pura-grid-pattern>
  <section class="hero">Content over a grid</section>
</pura-grid-pattern>

<!-- Dot grid, custom glow -->
<pura-grid-pattern dots style="--pura-grid-glow: #22c55e;">
  <div>...</div>
</pura-grid-pattern>

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

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