Bubbles

`<pura-bubbles>` paints translucent bubbles drifting up behind its slotted content with a lateral sway and a soft pop near the top, in the style of the tsParticles Bubbles preset. The bubbles are scattered deterministically in the pure template (no `Math.random`), so the server and client render the same field and the effect needs no client JS. Each bubble composes two CSS `@keyframes` (an outer rise and an inner sway) and carries a radial-gradient glare, so there is no animation runtime. Set `count` for density and theme with `--pura-bubbles-color`, `--pura-bubbles-highlight`, `--pura-bubbles-opacity` and `--pura-bubbles-travel` (set the travel to a small pixel value on short sections so the pop happens in view). Under reduced motion the bubbles hold a static scattered field. It registers in `window.__puraBubbless` by `data-pura-id` for agent enumeration.

Preview

<!-- aquatic hero: bubbles rise the full viewport behind the content -->
<pura-bubbles count="24" style="min-height: 100vh; background: linear-gradient(180deg, #0c4a6e, #082f49);">
  <h1 style="color: #e0f2fe;">Under the surface</h1>
</pura-bubbles>

<!-- short playful card: shorter travel so the pop stays in view -->
<pura-bubbles count="12" style="height: 240px; background: #ecfeff; --pura-bubbles-color: rgba(14, 165, 233, .5); --pura-bubbles-travel: -260px;">
  <div style="padding: 2rem; position: relative;">Kids zone</div>
</pura-bubbles>

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

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