Retro Grid

`<pura-retro-grid>` lays a tilted, perspective grid floor whose lines scroll toward the viewer, in the style of Magic UI's Retro Grid. The motion is one pure CSS `@keyframes` background-position scroll on a `rotateX` plane, so it works server-rendered with no client JS and no animation runtime. Theme the lines with `--pura-retro-grid-line`, and tune `--pura-retro-grid-cell`, `--pura-retro-grid-angle`, `--pura-retro-grid-perspective`, `--pura-retro-grid-opacity`, and `--pura-retro-grid-duration`. Under reduced motion the grid holds still via the base reset. It registers in `window.__puraRetroGrids` by `data-pura-id` for agent enumeration.

Preview

<pura-retro-grid style="--pura-retro-grid-line: #a855f7;">
  <section class="hero">Content over the grid</section>
</pura-retro-grid>

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

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