Skip to main content
  • Location: sabo/src/components/ui/animated-beam.tsx
The preview shows a simplified version. The actual component dynamically draws an SVG path between two elements within a container using React refs.

​
When to use

  • Draw attention to relationships or flows between elements.
  • Use decoratively; avoid covering critical content.

​
Usage

sabo/src/components/ui/animated-beam.tsx
"use client";
import { useRef } from "react";
import { AnimatedBeam } from "@/components/ui/animated-beam";

export function Example() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const aRef = useRef<HTMLDivElement | null>(null);
  const bRef = useRef<HTMLDivElement | null>(null);

  return (
    <div ref={containerRef} className="relative grid grid-cols-2 items-center gap-8 p-6 border rounded-xl">
      <div ref={aRef} className="h-16 rounded-md border bg-background" />
      <div ref={bRef} className="h-16 rounded-md border bg-background" />
      <AnimatedBeam containerRef={containerRef} fromRef={aRef} toRef={bRef} curvature={40} />
    </div>
  );
}

​
Key props

​
containerRef
RefObject<HTMLElement | null>
Reference to the container element that holds the beam’s coordinate system.
​
fromRef
RefObject<HTMLElement | null>
Reference to the starting element where the beam originates.
​
toRef
RefObject<HTMLElement | null>
Reference to the target element where the beam points.
​
curvature
number
default:"0"
Controls the curve of the beam path. Higher values create more pronounced curves.
​
reverse
boolean
default:"false"
Reverses the gradient direction of the beam animation.
​
duration
number
Animation duration in seconds (randomized by default).
​
pathColor
string
default:"gray"
Color of the beam’s path line.
​
pathWidth
number
default:"2"
Thickness of the beam’s path line in pixels.
​
gradientStartColor
string
default:"#ffaa40"
Start color of the animated gradient beam.
​
gradientStopColor
string
default:"#9c40ff"
End color of the animated gradient beam.

​
Styling tip

  • Place inside a relatively positioned, rounded container; keep contrast subtle.
  • Mark purely decorative instances with aria-hidden="true".