Animated Beam

An animated beam of light that travels along a path between two elements.

motion

The beam animates automatically upon mounting. It dynamically recalculates its path when the container or the referenced elements are resized.

Options you can pass to customize this component.

Prop
Type
Description
containerRef*
React.RefObject<HTMLElement>

Reference to the container element that wraps both source and target elements.

fromRef*
React.RefObject<HTMLElement>

Reference to the source element where the beam starts.

toRef*
React.RefObject<HTMLElement>

Reference to the target element where the beam ends.

curvature
number

The amount of curve in the beam path.

reverse
boolean

If true, the animation flows from the target to the source.

pathColor
string

The color of the background path.

pathWidth
number

The width of the beam path.

pathOpacity
number

The opacity of the background path.

gradientStartColor
string

The starting color of the animated gradient.

gradientStopColor
string

The ending color of the animated gradient.

delay
number

Delay before the animation starts.

duration
number

Duration of the beam animation.

npx shadcn add amitgajare2/ariseui/animated-beam
Animated Beam