Animated Mesh Gradient

`<pura-mesh-gradient>` is an animated mesh-gradient background: large blurred radial-gradient blobs that drift and blend slowly behind the slotted content, the full-bleed multicolor backdrop of SaaS hero sections (unlike `pura-aurora`, which is a northern-lights glow). The blobs are deterministically scattered in the pure template, so the server and the client paint the same mesh and the effect already looks finished without JS. Motion is pure CSS `@keyframes` with prime durations per layer, so the composite pattern never visibly repeats. `blobs` sets the layer count, `speed` the drift speed, and `static` freezes the mesh. Colors come from `--pura-mesh-gradient-1` through `--pura-mesh-gradient-5`, with `--pura-mesh-gradient-blur`, `--pura-mesh-gradient-opacity` and `--pura-mesh-gradient-bg` for the overall look. Reduced motion freezes the mesh at its painted state. Each instance registers in `window.__puraMeshGradients` by `data-pura-id` and mirrors `data-pura-mesh-*` attributes.

Preview

<!-- full-bleed hero backdrop -->
<pura-mesh-gradient style="min-height: 100vh; display: grid; place-items: center;">
  <div style="text-align: center;">
    <h1>Ship your next idea today</h1>
    <p>The component library that runs everywhere.</p>
  </div>
</pura-mesh-gradient>

<!-- brand palette, slower drift, softer blur -->
<pura-mesh-gradient blobs="3" speed="0.5"
  style="--pura-mesh-gradient-1: #0ea5e9; --pura-mesh-gradient-2: #14b8a6; --pura-mesh-gradient-3: #a3e635; --pura-mesh-gradient-blur: 90px; padding: 48px; border-radius: 12px;">
  <h2>Calm, on brand, always moving</h2>
</pura-mesh-gradient>

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

import "./pura/lib/mesh-gradient.js";