AnimationsProNew
Animated Beam
A pulse of light travels along a line between two elements. Great for showing integrations and data flow.
Customize
pathColor
gradientStartColor
gradientStopColor
Based on Animated Beam (MIT license) · Terms of use
Props
19 properties| Property | Type | Default | Description |
|---|---|---|---|
| containerRef | RefObject<HTMLElement | null> | — | Ref to the shared container the beam is drawn in. |
| fromRef | RefObject<HTMLElement | null> | — | Ref to the element the beam starts from. |
| toRef | RefObject<HTMLElement | null> | — | Ref to the element the beam ends at. |
| curvature | number | 0 | Curve of the line in pixels. Negative bends it up. |
| duration | number | 5 | Seconds for one pass of light. |
| delay | number | 0 | Delay before start, in seconds. |
| reverse | boolean | false | Run the light the other way. |
| pathColor | string | "#ffffff" | Color of the static line. |
| pathWidth | number | 2 | Line width in pixels. |
| pathOpacity | number | 0.2 | Opacity of the static line. |
| gradientStartColor | string | "#ffffff" | Color at the head of the moving light. |
| gradientStopColor | string | "#a1a1aa" | Color at the tail of the moving light. |
| repeat | number | "Infinity" | How many times to repeat. Infinite by default. |
| repeatDelay | number | 0 | Pause between repeats, in seconds. |
| startXOffset | number | 0 | Horizontal offset of the start, in pixels. |
| startYOffset | number | 0 | Vertical offset of the start, in pixels. |
| endXOffset | number | 0 | Horizontal offset of the end, in pixels. |
| endYOffset | number | 0 | Vertical offset of the end, in pixels. |
| className | string | — | Classes for the SVG layer. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge