"use client";

import * as React from "react";
import { motion } from "framer-motion";

import { cn } from "@/lib/utils";

interface BeamConnection<T extends HTMLElement = HTMLElement> {
  fromRef: React.RefObject<T | null>;
  toRef: React.RefObject<T | null>;
  curvature?: number;
}

interface AnimatedBeamConnectorsProps<T extends HTMLElement = HTMLElement>
  extends React.SVGAttributes<SVGSVGElement> {
  containerRef: React.RefObject<T | null>;
  connections: BeamConnection<T>[];
  strokeWidth?: number;
  duration?: number;
  dashLength?: number;
  dashGap?: number;
  reverse?: boolean;
}

function AnimatedBeamConnectors<T extends HTMLElement = HTMLElement>({
  containerRef,
  connections,
  strokeWidth = 2,
  duration = 3,
  dashLength = 16,
  dashGap = 12,
  reverse = false,
  className,
  ...props
}: AnimatedBeamConnectorsProps<T>) {
  const [paths, setPaths] = React.useState<string[]>([]);
  const [size, setSize] = React.useState({ width: 0, height: 0 });

  const updatePaths = React.useCallback(() => {
    if (!containerRef.current) return;

    const containerRect = containerRef.current.getBoundingClientRect();
    setSize({
      width: containerRect.width,
      height: containerRect.height,
    });

    const nextPaths = connections.map((connection) => {
      const fromElement = connection.fromRef.current;
      const toElement = connection.toRef.current;
      if (!fromElement || !toElement) return "";

      const fromRect = fromElement.getBoundingClientRect();
      const toRect = toElement.getBoundingClientRect();

      const startX =
        fromRect.left + fromRect.width / 2 - containerRect.left;
      const startY =
        fromRect.top + fromRect.height / 2 - containerRect.top;
      const endX = toRect.left + toRect.width / 2 - containerRect.left;
      const endY = toRect.top + toRect.height / 2 - containerRect.top;

      const deltaX = endX - startX;
      const deltaY = endY - startY;
      const curve = connection.curvature ?? 0.25;
      const direction = deltaY === 0 ? 1 : Math.sign(deltaY);
      const controlOffset =
        Math.max(Math.abs(deltaX), Math.abs(deltaY)) * curve * direction;

      const control1X = startX + deltaX * 0.25;
      const control1Y = startY + controlOffset;
      const control2X = startX + deltaX * 0.75;
      const control2Y = endY - controlOffset;

      return `M ${startX} ${startY} C ${control1X} ${control1Y} ${control2X} ${control2Y} ${endX} ${endY}`;
    });

    setPaths(nextPaths);
  }, [connections, containerRef]);

  React.useLayoutEffect(() => {
    updatePaths();
    if (!containerRef.current) return;

    const observer = new ResizeObserver(updatePaths);
    observer.observe(containerRef.current);
    window.addEventListener("scroll", updatePaths, true);

    return () => {
      observer.disconnect();
      window.removeEventListener("scroll", updatePaths, true);
    };
  }, [containerRef, updatePaths]);

  if (size.width === 0 || size.height === 0) return null;

  const dashTotal = dashLength + dashGap;

  return (
    <svg
      aria-hidden="true"
      className={cn("pointer-events-none absolute inset-0", className)}
      width={size.width}
      height={size.height}
      viewBox={`0 0 ${size.width} ${size.height}`}
      fill="none"
      {...props}
    >
      {paths.map((path, index) =>
        path ? (
          <g key={`${index}-${path}`}>
            <path
              d={path}
              className="text-muted-foreground/30"
              stroke="currentColor"
              strokeWidth={strokeWidth}
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <motion.path
              d={path}
              className="text-primary"
              stroke="currentColor"
              strokeWidth={strokeWidth}
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeDasharray={`${dashLength} ${dashGap}`}
              initial={{
                strokeDashoffset: reverse ? -dashTotal : dashTotal,
              }}
              animate={{
                strokeDashoffset: reverse ? dashTotal : -dashTotal,
              }}
              transition={{
                duration,
                ease: "linear",
                repeat: Infinity,
              }}
            />
          </g>
        ) : null
      )}
    </svg>
  );
}

export { AnimatedBeamConnectors };
export type { AnimatedBeamConnectorsProps, BeamConnection };
Animated Beam Connectors

Dependencies

Files

Installation
