Animated Beam

Decorative animated beam effect.

• 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".