AnimatedBeam
Animated SVG beams that connect elements with smooth gradients and customizable curves.
Basic Usage
1
5
2
HUB
6
3
7
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| containerRef | HTMLElement | - | Container element reference (required) |
| fromRef | HTMLElement | - | Starting element reference (required) |
| toRef | HTMLElement | - | Ending element reference (required) |
| curvature | number | 0 | Curve amount (positive/negative for direction) |
| reverse | boolean | false | Reverse animation direction |
| pathColor | string | gray | Static path color |
| pathWidth | number | 2 | Path stroke width |
| pathOpacity | number | 0.2 | Static path opacity |
| gradientStartColor | string | #FFAA40 | Animated gradient start color |
| gradientStopColor | string | #9C40FF | Animated gradient stop color |
| duration | number | Random (4-7s) | Animation duration in seconds |
| delay | number | 0 | Animation delay in seconds |
| startXOffset | number | 0 | X offset from start element center |
| startYOffset | number | 0 | Y offset from start element center |
| endXOffset | number | 0 | X offset from end element center |
| endYOffset | number | 0 | Y offset from end element center |
Usage Notes
Element References
The component requires element references using Svelte's bind:this directive. Make sure all references are bound before rendering the AnimatedBeam.
Curvature
Use positive values for upward curves and negative values for downward curves. The value represents the vertical offset of the curve's control point.
Responsive Behavior
The component automatically updates the beam paths when the container is resized using ResizeObserver.