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.