PulseRings

Rings radiating out from a centre: live status, radar, "on air".

Live now

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/pulse-rings.json

React
import PulseRings from "@/components/fx/pulse-rings"

<PulseRings><Avatar … /></PulseRings>

Rings are aria-hidden; give the centre content its own accessible name if it means something (e.g. "Live").
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows one still ring.

Prop	Type	Default	Description
children	ReactNode	—	Centre content.
color	string	emerald, 60%	Ring colour.
rings	number	3	Rings in flight.
duration	number	2.8	Seconds per ring.
size	number	72	Starting diameter in px.
paused	boolean	false	Stop pulsing.