Installation
npx shadcn@latest add "https://magicui.design/r/animated-beam"Examples
Animated Beam Uni-Directional
Animated Beam Bi-Directional
Animated Beam Multiple Inputs
Animated Beam Multiple Outputs
Props
Animated Beam
| Prop | Type | Description | Default |
|---|---|---|---|
| className | string | The class name for the component. | - |
| containerRef | ref | The container ref. | - |
| fromRef | ref | The ref of the element from which the beam should start. | - |
| toRef | ref | The ref of the element to which the beam should end. | - |
| curvature | number | The curvature of the beam. | 0 |
| reverse | boolean | Whether the beam should be reversed. | false |
| duration | number | The duration of the beam. | 5 |
| delay | number | The delay of the beam. | 0 |
| pathColor | string | The color of the beam. | "gray" |
| pathWidth | number | The width of the beam. | 2 |
| pathOpacity | number | The opacity of the beam. | 0.2 |
| gradientStartColor | string | The start color of the gradient. | "#ffaa40" |
| gradientStopColor | string | The stop color of the gradient. | "#9c40ff" |
| startXOffset | number | The start x offset of the beam. | 0 |
| startYOffset | number | The start y offset of the beam. | 0 |
| endXOffset | number | The end x offset of the beam. | 0 |
| endYOffset | number | The end y offset of the beam. | 0 |
Credits
- Credit to @itsarghyadas for figuring out the foundation of this!