Interactive Grid

`<pura-interactive-grid>` is a background grid of real cells that reacts to the pointer, in the style of Magic UI's Interactive Grid Pattern and Aceternity's Background Boxes. Moving the cursor lights the cell underneath instantly and lets it fade back out, so a sweep leaves a dimming trail; clicking ripples a flash outward, each cell delayed in proportion to its distance from the clicked cell. The grid is generated deterministically in the pure template, so the server paints the full static grid (with a few pulsing pre-lit cells via `prelit`) and all interaction is a progressive enhancement. Slotted content layers above the cells with `pointer-events: none` so the grid keeps reacting under text; give interactive children `pointer-events: auto`. Theme with `--pura-interactive-grid-line`, `--pura-interactive-grid-highlight`, `--pura-interactive-grid-wave` and `--pura-interactive-grid-fade`. Reduced motion holds pre-lit cells at a steady soft highlight and drops the click wave. Each instance registers in `window.__puraInteractiveGrids` by `data-pura-id` with `{ columns, rows, wave(x, y) }` and fires `pura-interactive-grid:wave` on every ripple.

Preview

<!-- hero background: hover trail plus click ripple under the headline -->
<pura-interactive-grid columns="20" rows="10" style="height: 60vh;">
  <div style="height: 100%; display: grid; place-items: center;">
    <h1>Build on the grid</h1>
  </div>
</pura-interactive-grid>

<!-- dense quiet grid: custom highlight, no click wave, no pre-lit cells -->
<pura-interactive-grid columns="32" rows="16" prelit="0" no-wave
  style="height: 320px; --pura-interactive-grid-highlight: rgba(34, 197, 94, 0.4); --pura-interactive-grid-fade: 1200ms;">
</pura-interactive-grid>

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

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