animated-beam

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4interface AnimatedBeamProps {
5  /** Reference to the container element */
6  containerRef: React.RefObject<HTMLElement | null>;
7  /** Reference to the start element */
8  fromRef: React.RefObject<HTMLElement | null>;
9  /** Reference to the end element */
10  toRef: React.RefObject<HTMLElement | null>;
11  /** Curvature of the beam (-1 to 1, 0 is straight) */
12  curvature?: number;
13  /** Animation duration in seconds */
14  duration?: number;
15  /** Delay before animation starts */
16  delay?: number;
17  /** Reverse the animation direction */
18  reverse?: boolean;
19  /** Width of the beam path */
20  pathWidth?: number;
21  /** Color of the beam gradient start */
22  gradientStartColor?: string;
23  /** Color of the beam gradient end */
24  gradientStopColor?: string;
25  /** Starting point offset */
26  startXOffset?: number;
27  startYOffset?: number;
28  /** Ending point offset */
29  endXOffset?: number;
30  endYOffset?: number;
31  className?: string;
32}
33 
34const AnimatedBeam = ({
35  containerRef,
36  fromRef,
37  toRef,
38  curvature = 0,
39  duration = 2,
40  delay = 0,
41  reverse = false,
42  pathWidth = 2,
43  gradientStartColor = "#18181b",
44  gradientStopColor = "#18181b",
45  startXOffset = 0,
46  startYOffset = 0,
47  endXOffset = 0,
48  endYOffset = 0,
49  className,
50}: AnimatedBeamProps) => {
51  const [pathD, setPathD] = React.useState("");
52  const [svgDimensions, setSvgDimensions] = React.useState({
53    width: 0,
54    height: 0,
55  });
56  const uniqueId = React.useId();
57 
58  const updatePath = React.useCallback(() => {
59    if (!containerRef.current || !fromRef.current || !toRef.current) return;
60 
61    const containerRect = containerRef.current.getBoundingClientRect();
62    const fromRect = fromRef.current.getBoundingClientRect();
63    const toRect = toRef.current.getBoundingClientRect();
64 
65    const startX =
66      fromRect.left - containerRect.left + fromRect.width / 2 + startXOffset;
67    const startY =
68      fromRect.top - containerRect.top + fromRect.height / 2 + startYOffset;
69    const endX =
70      toRect.left - containerRect.left + toRect.width / 2 + endXOffset;
71    const endY =
72      toRect.top - containerRect.top + toRect.height / 2 + endYOffset;
73 
74    const midX = (startX + endX) / 2;
75    const midY = (startY + endY) / 2;
76 
77    // Calculate control point for quadratic bezier curve
78    const dx = endX - startX;
79    const dy = endY - startY;
80    const controlX = midX - dy * curvature;
81    const controlY = midY + dx * curvature;
82 
83// … truncated