Ripple
Concentric expanding circles emanating outward from a center point with staggered animation delays.
When to Use
- Signal "live", "online", or "broadcasting" status next to a user avatar or indicator.
- Draw attention to a call-to-action button or feature icon.
- Background decoration for hero sections conveying "reach" or "impact".
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| RingCount | int | 5 | Number of concentric ripple rings. |
| BaseSize | double | 4.0 | Diameter in rem of the innermost ring. |
| SizeStep | double | 3.0 | Additional size (rem) added per ring outward. |
| DelayStep | double | 0.4 | Animation delay in seconds between rings. |
| Duration | string | "2.5s" | CSS duration of one ripple expansion cycle. |
| Color | string | "var(--color-primary)" | Color of the ring borders. |
Related Components
- AnimatedBeam — SVG beam tracing between two DOM elements.
- Sparkles — Decorative sparkle particles around content.
- Globe — Rotating stylized globe visualization.