Skip to main content

​
Overview

The Animated Beam component creates an SVG beam that connects elements with smooth animation. It’s perfect for visualizing connections, data flow, or relationships between UI elements.

​
Usage

<AnimatedBeam
  :containerRef="containerRef"
  :fromRef="fromRef"
  :toRef="toRef"
  :curvature="0"
  :duration="5"
  gradientStartColor="#FFAA40"
  gradientStopColor="#9C40FF"
/>

​
Props

​
class
string
default:""
Additional CSS classes to apply to the component for customization.
​
containerRef
HTMLElement
required
Reference to the container element where the beam is rendered.
​
fromRef
HTMLElement
required
Reference to the starting element from which the beam originates.
​
toRef
HTMLElement
required
Reference to the ending element where the beam points to.
​
curvature
number
default:"0"
Controls the curvature of the beam; higher values create a more curved path.
​
reverse
boolean
default:"false"
Reverses the animation direction of the beam if set to true.
​
pathColor
string
default:"gray"
Color of the beam’s path.
​
pathWidth
number
default:"2"
Stroke width of the beam’s path.
​
pathOpacity
number
default:"0.2"
Opacity of the beam’s path.
​
gradientStartColor
string
default:"#FFAA40"
Starting color of the beam’s gradient animation.
​
gradientStopColor
string
default:"#9C40FF"
Ending color of the beam’s gradient animation.
​
delay
number
default:"0"
Delay before the beam’s animation starts, in seconds.
​
duration
number
default:"Random between 4–7s"
Duration of the beam’s animation cycle, in seconds.
​
startXOffset
number
default:"0"
Horizontal offset for the beam’s starting point.
​
startYOffset
number
default:"0"
Vertical offset for the beam’s starting point.
​
endXOffset
number
default:"0"
Horizontal offset for the beam’s ending point.
​
endYOffset
number
default:"0"
Vertical offset for the beam’s ending point.

​
Credits

Inspired and ported from Magic UI Animated Beam.

Build docs developers (and LLMs) love

Get started for freeTalk to us