Installation
Examples
Animated Beam Uni-Directional
Animated Beam Bi-Directional
Animated Beam Multiple Inputs
Animated Beam Multiple Outputs
Usage
showLineNumbers
showLineNumbers
Props
Animated Beam
| Prop | Type | Default | Description |
|---|---|---|---|
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 | 0 | The curvature of the beam. |
reverse | boolean | false | Whether the beam should be reversed. |
duration | number | 5 | The duration of the beam. |
delay | number | 0 | The delay of the beam. |
pathColor | string | gray | The color of the beam. |
pathWidth | number | 2 | The width of the beam. |
pathOpacity | number | 0.2 | The opacity of the beam. |
gradientStartColor | string | #ffaa40 | The start color of the gradient. |
gradientStopColor | string | #9c40ff | The stop color of the gradient. |
startXOffset | number | 0 | The start x offset of the beam. |
startYOffset | number | 0 | The start y offset of the beam. |
endXOffset | number | 0 | The end x offset of the beam. |
endYOffset | number | 0 | The end y offset of the beam. |
Credits
- Credit to @itsarghyadas for figuring out the foundation of this!