AnimatedBeam
SVG beam that traces an animated gradient path between two DOM elements.
Installation
dotnet add package Lumeo.Motion
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <AnimatedBeam />
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.
Curvature: 30 px
DurationMs: 2500 ms
Adjust curvature and animation speed live.
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| ContainerId | string? | null | Id of the position:relative container. Coordinates are measured relative to it. |
| 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 | Bezier control point offset in px (positive = bows up). |
| Reverse | bool | false | Reverses direction of travel. |
| GradientStartColor | string | "#ffaa40" | Start color of the beam gradient. |
| GradientStopColor | string | "#9c40ff" | End color of the beam gradient. |
| PathColor | string | "var(--color-border)" | Color of the guide track. |
| PathOpacity | double | 0.3 | Opacity of the guide track (0–1). |
| PathWidth | double | 2 | Width of the guide track path in px. |
| BeamWidth | double | 2 | Width of the animated beam stroke in px. |