# AnimatedBeam

Source: https://lumeo.nativ.sh/components/animated-beam

# AnimatedBeam

SVG beam that traces an animated gradient path between two DOM elements.

## When to Use

-   Visualize data flows between services in integration or architecture diagrams.
-   Connect icon nodes in a feature showcase or product diagram.
-   Add motion to "how it works" sections by tracing steps together.

Preview Code

Basic Beam (two icon nodes)

A

B

Copy Code

Preview Code

Custom Color & Curvature

🔌

⚡

Copy Code

## API Reference

Property

Type

Default

Description

FromId

string?

null

The `id` of the source element.

ToId

string?

null

The `id` of the destination element.

DurationMs

int

3000

Duration of one traversal in milliseconds.

DelayMs

int

0

Delay before the first cycle.

Curvature

double

0.3

Bezier curvature (0 = straight line).

Color

string

"var(--color-primary)"

CSS color of the beam gradient.

Opacity

double

0.85

Peak opacity of the beam (0–1).

PathWidth

double

1

Width of the guide path stroke in px.

BeamWidth

double

2

Width of the animated beam stroke in px.

## Related Components

-   [Ripple](/components/ripple) — Concentric expanding rings emanating from a center.
-   [Sparkles](/components/sparkles) — Decorative sparkle particle animation.