Animated beam

import { useEffect, useId, useState, type RefObject } from 'react';
import { motion, useReducedMotion } from 'motion/react';

type AnimatedBeamProps = {
  container: RefObject<HTMLElement | null>;
  from: RefObject<HTMLElement | null>;
  to: RefObject<HTMLElement | null>;
  curve?: number; // px the path bows out from each end
  delay?: number; // seconds, to stagger several beams
};

export function AnimatedBeam({
  container,
  from,
  to,
  curve = 80,
  delay = 0
}: AnimatedBeamProps) {
  const gradient = useId();
  const reduceMotion = useReducedMotion();
  const [path, setPath] = useState('');

  useEffect(() => {
    const [box, start, end] = [container.current, from.current, to.current];
    if (!box || !start || !end) return;
    // Join the right edge of `from` to the left edge of `to`, in the
    // container's coordinates, and redo it whenever the layout changes.
    const measure = () => {
      const origin = box.getBoundingClientRect();
      const a = start.getBoundingClientRect();
      const b = end.getBoundingClientRect();
      const [x1, x2] = [a.right - origin.left, b.left - origin.left];
      const y1 = a.top + a.height / 2 - origin.top;
      const y2 = b.top + b.height / 2 - origin.top;
      setPath(
        `M ${x1} ${y1} C ${x1 + curve} ${y1}, ${x2 - curve} ${y2}, ${x2} ${y2}`
      );
    };
    const observer = new ResizeObserver(measure);
    observer.observe(box);
    return () => observer.disconnect();
  }, [container, from, to, curve]);

  return (
    <svg
      aria-hidden
      fill='none'
      className='pointer-events-none absolute inset-0 size-full overflow-visible'
    >
      <defs>
        <linearGradient id={gradient}>
          <stop offset='0' stopColor='#60a5fa' />
          <stop offset='1' stopColor='#c084fc' />
        </linearGradient>
      </defs>
      <path d={path} stroke='currentColor' opacity={0.15} strokeWidth={2} />
      {!reduceMotion && (
        <motion.path
          d={path}
          stroke={`url(#${gradient})`}
          strokeWidth={2.5}
          strokeLinecap='round'
          // Motion normalizes the path to a length of 1. A 0.25 dash with a
          // gap longer than the path slides from before the start to past
          // the end, so one pulse crosses at a time.
          initial={{ pathLength: 0.25, pathSpacing: 2, pathOffset: -0.25 }}
          animate={{ pathOffset: 1 }}
          transition={{
            duration: 1.5,
            delay,
            repeat: Infinity,
            repeatDelay: 1.9,
            ease: 'easeInOut'
          }}
        />
      )}
    </svg>
  );
}