AnimatedBeam

Draws an animated SVG path between two DOM elements, visualising a connection or data-flow with a travelling gradient beam. Attach refs to a container and any two child elements — AnimatedBeam handles the SVG geometry automatically.

Import

import { AnimatedBeam } from "@animui/ui";

Basic

Place a relative-positioned container around your source and target elements, then pass all three refs to AnimatedBeam.

Usage notes

The containerRef element must have position: relative (or absolute / fixed) so the SVG can be absolutely positioned inside it.
Both fromRef and toRef must be descendants of containerRef.
Use curvature to add a visual arc — handy when multiple beams share the same endpoints.
Combine multiple <AnimatedBeam /> instances inside one container to build graph or flow-chart layouts.

Props

Prop	Type	Default	Description
`containerRef`	`React.RefObject<HTMLElement \| null>`	—	Ref attached to the relative-positioned container div that wraps both source and target elements. The SVG is absolutely positioned inside this container.
`fromRef`	`React.RefObject<HTMLElement \| null>`	—	Ref attached to the source element where the beam originates.
`toRef`	`React.RefObject<HTMLElement \| null>`	—	Ref attached to the target element where the beam terminates.
`curvature`	`number`	`0`	Controls the bend of the bezier curve connecting the two elements. Positive values curve upward, negative values curve downward.
`reverse`	`boolean`	`false`	When true, reverses the direction of the animated gradient so it flows from target to source.
`duration`	`number`	`3`	Duration of one full animation cycle in seconds.
`delay`	`number`	`0`	Delay in seconds before the animation starts.
`pathColor`	`string`	`"#cbd5e1"`	Color of the static SVG path drawn between the two elements.
`pathWidth`	`number`	`2`	Stroke width of the SVG path in pixels.
`pathOpacity`	`number`	`0.3`	Opacity of the static SVG path (0–1).
`gradientStartColor`	`string`	`"#7c3aed"`	Start color of the animated gradient that travels along the path.
`gradientStopColor`	`string`	`"#3b82f6"`	End color of the animated gradient that travels along the path.
`className`	`string`	—	Additional CSS classes applied to the root SVG element.