Ripple
Concentric pulsing circles radiating outward — ideal as a radial attention-grabber, ping indicator, or ambient background effect.
import { Ripple } from "@animui/ui"Basic
Fewer rings, custom color
Reduce numCircles for a cleaner look and change color to match your accent.
ping
Props
| Prop | Type | Default | Description |
|---|---|---|---|
mainCircleSize | number | 180 | Diameter of the innermost circle in pixels. |
mainCircleOpacity | number | 0.3 | Opacity of the innermost circle. |
numCircles | number | 7 | Total number of concentric rings. |
color | string | "139,92,246" | RGB values as a comma-separated string, e.g. "139,92,246" for violet. |
className | string | — | Additional classes for the container. |