Gooey Blobs

`<pura-blobs>` renders organic blobs that drift slowly and fuse together when they get close (the classic metaball / lava-lamp effect) behind the slotted content. The circles live in one container routed through an inline SVG goo filter (`feGaussianBlur` plus an `feColorMatrix` alpha threshold), and the drift is pure CSS `@keyframes`, so no per-frame JS runs. Every blob's position, size, color and timing is deterministic index math in the pure template, which means the server and client paint the same field and the effect works before any JS loads. `count` sets how many blobs, `speed` the base drift cycle in seconds, and `goo` the filter blur strength (how readily blobs fuse). Theme it with `--pura-blobs-color-1/2/3`, `--pura-blobs-size` and `--pura-blobs-opacity`. Reduced motion freezes the blobs in their scattered layout. Each instance registers in `window.__puraBlobss` by `data-pura-id` and mirrors `data-pura-blobs-*` attributes.

Preview

<!-- lava-lamp hero backdrop with default palette -->
<pura-blobs style="min-height: 60vh; background: #0f172a; color: #fff;">
  <header style="display: grid; place-items: center; min-height: 60vh;">
    <h1>Launch faster</h1>
  </header>
</pura-blobs>

<!-- denser, faster field with a custom palette and bigger blobs -->
<pura-blobs count="9" speed="10" goo="20"
  style="height: 320px; --pura-blobs-color-1: #f97316; --pura-blobs-color-2: #ef4444; --pura-blobs-color-3: #facc15; --pura-blobs-size: 13rem; --pura-blobs-opacity: 0.7;">
  <div style="position: relative; padding: 2rem;">Warm lava palette</div>
</pura-blobs>

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

import "./pura/lib/blobs.js";