Animated Beam

1"use client"
2 
3import { useEffect, useId, useState, type RefObject } from "react"
4import { motion } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8export interface AnimatedBeamProps {
9  className?: string
10  containerRef: RefObject<HTMLElement | null> // Container ref
11  fromRef: RefObject<HTMLElement | null>
12  toRef: RefObject<HTMLElement | null>
13  curvature?: number
14  reverse?: boolean
15  pathColor?: string
16  pathWidth?: number
17  pathOpacity?: number
18  gradientStartColor?: string
19  gradientStopColor?: string
20  delay?: number
21  duration?: number
22  repeat?: number
23  repeatDelay?: number
24  startXOffset?: number
25  startYOffset?: number
26  endXOffset?: number
27  endYOffset?: number
28}
29 
30export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
31  className,
32  containerRef,
33  fromRef,
34  toRef,
35  curvature = 0,
36  reverse = false, // Include the reverse prop
37  duration = 5,
38  delay = 0,
39  pathColor = "gray",
40  pathWidth = 2,
41  pathOpacity = 0.2,
42  gradientStartColor = "#ffaa40",
43  gradientStopColor = "#9c40ff",
44  repeat = Infinity,
45  repeatDelay = 0,
46  startXOffset = 0,
47  startYOffset = 0,
48  endXOffset = 0,
49  endYOffset = 0,
50}) => {
51  const id = useId()
52  const [pathD, setPathD] = useState("")
53  const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 })
54 
55  // Calculate the gradient coordinates based on the reverse prop
56  const gradientCoordinates = reverse
57    ? {
58        x1: ["90%", "-10%"],
59        x2: ["100%", "0%"],
60        y1: ["0%", "0%"],
61        y2: ["0%", "0%"],
62      }
63    : {
64        x1: ["10%", "110%"],
65        x2: ["0%", "100%"],
66        y1: ["0%", "0%"],
67        y2: ["0%", "0%"],
68      }
69 
70  useEffect(() => {
71    const updatePath = () => {
72      if (containerRef.current && fromRef.current && toRef.current) {
73        const containerRect = containerRef.current.getBoundingClientRect()
74        const rectA = fromRef.current.getBoundingClientRect()
75        const rectB = toRef.current.getBoundingClientRect()
76 
77        const svgWidth = containerRect.width
78        const svgHeight = containerRect.height
79        setSvgDimensions({ width: svgWidth, height: svgHeight })
80 
81        const startX =
82          rectA.left - containerRect.left + rectA.width / 2 + startXOffset
83        const startY =
84          rectA.top - containerRect.top + rectA.height / 2 + startYOffset
85        const endX =
86          rectB.left - containerRect.left + rectB.width / 2 + endXOffset
87        const endY =
88// … truncated