Grid Motion

`<pura-grid-motion>` is the awwwards infinite-grid hero: a grid of images or cards, wider than its container on purpose, whose rows slide laterally following the pointer with lerp inertia. Rows alternate direction and move at three depth bands, so the grid feels parallax-alive. Slotted children are the cells; row membership is computed from `columns`, so you just dump a flat list of images. `shift` sets the max travel, `ease` the lerp factor, `tilt` rotates the whole grid for the classic angled look, and `global` tracks the pointer across the whole window for fullscreen heroes. Tokens: `--pura-grid-motion-gap`, `--pura-grid-motion-overflow` (grid width, default 160%), `--pura-grid-motion-radius`, `--pura-grid-motion-ratio`, `--pura-grid-motion-bg`. SSR and no-JS paint the static centered grid; reduced motion and coarse pointers never bind. Each instance registers in `window.__puraGridMotions` by `data-pura-id`; `data-pura-gm-x` mirrors the settled offset.

Preview

<!-- fullscreen hero: rows follow the pointer anywhere on the page -->
<pura-grid-motion columns="7" tilt="-12" global style="height: 100vh; --pura-grid-motion-bg: #09090b;">
  <img src="/photos/01.jpg" alt="" />
  <img src="/photos/02.jpg" alt="" />
  <!-- ...one flat list of cells; 7 per row -->
</pura-grid-motion>

<!-- cards instead of images, contained pointer, floatier easing -->
<pura-grid-motion columns="4" shift="120" ease="0.04" style="height: 60vh;">
  <div style="background: var(--pura-muted, #f4f4f5); display: grid; place-items: center;">Aa</div>
  <div style="background: var(--pura-muted, #f4f4f5); display: grid; place-items: center;">Bb</div>
  <!-- ... -->
</pura-grid-motion>

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

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