# Ripple

Source: https://lumeo.nativ.sh/components/ripple

# 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".

Preview Code

Default Ripple

Copy Code

Preview Code

Custom Rings and Color

Copy Code

Preview Code

Slow Pulse

Copy Code

## 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](/components/animated-beam) — SVG beam tracing between two DOM elements.
-   [Sparkles](/components/sparkles) — Decorative sparkle particles around content.
-   [Globe](/components/globe) — Rotating stylized globe visualization.