Pulse Rings
`<pura-pulse-rings>` draws concentric rings that expand and fade out from the center behind the slotted content (a logo, avatar, or icon): the classic soft signal or radar backdrop. It is distinct from `<pura-ripple>`, which is a pointer-triggered touch ripple. Each ring is a pure CSS `@keyframes` loop with a deterministic per-index negative delay, so the field is already mid-cycle on first paint, works with no client JS, and the server and client render byte-identical markup. `count`, `duration` and `scale` shape the field; `filled` adds a faint background tint per ring. Size and color via `--pura-pulse-rings-size`, `--pura-pulse-rings-color`, `--pura-pulse-rings-border` and `--pura-pulse-rings-opacity`. Under reduced motion the loop is media-gated off and the rings hold a static staggered frame. Each instance registers in `window.__puraPulseRingss` by `data-pura-id`.
Preview
<!-- radar backdrop behind a logo -->
<pura-pulse-rings style="height: 320px;">
<img src="/logo.svg" alt="Acme" width="96" height="96" />
</pura-pulse-rings>
<!-- denser, filled, brand-colored field behind an icon button -->
<pura-pulse-rings count="6" duration="4" scale="3" filled
style="height: 280px; --pura-pulse-rings-size: 90px; --pura-pulse-rings-color: var(--pura-primary, #6366f1);">
<button aria-label="Start broadcast" style="width: 64px; height: 64px; border-radius: 999px;">Go</button>
</pura-pulse-rings>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
count | number | 4 | Number of rings, capped at 8. |
duration | number | 3 | Seconds per expand and fade cycle. |
scale | number | 2.5 | Expansion factor each ring grows to before vanishing. |
filled | boolean | false | Tints each ring with a faint background fill. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/pulse-rings.js"></script>import "./pura/lib/pulse-rings.js";