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.
A
B
🔌
⚡
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. |