Animated Beam

1"use client";
2 
3import { motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type AnimatedBeamProps = {
7  /** The element the SVG overlays — both refs must live inside it. */
8  containerRef: React.RefObject<HTMLElement | null>;
9  /** Element the beam starts from. */
10  fromRef: React.RefObject<HTMLElement | null>;
11  /** Element the beam ends at. */
12  toRef: React.RefObject<HTMLElement | null>;
13  /** Bow of the curve in pixels (positive bends upward). */
14  curvature?: number;
15  /** Animate from the end toward the start. */
16  reverse?: boolean;
17  /** Seconds for one travel of the gradient. */
18  duration?: number;
19  /** Delay before the first travel, in seconds. */
20  delay?: number;
21  /** Color of the static resting path. */
22  pathColor?: string;
23  /** Width of the path in pixels. */
24  pathWidth?: number;
25  /** Opacity of the static resting path. */
26  pathOpacity?: number;
27  /**
28   * SVG `stroke-dasharray` for the resting path — e.g. `"4 5"` for dashes or
29   * `"0.1 8"` (with the round cap) for dots. Omit for a solid line.
30   */
31  pathDashArray?: string;
32  /** Leading color of the travelling gradient. */
33  gradientStartColor?: string;
34  /** Trailing color of the travelling gradient. */
35  gradientStopColor?: string;
36  startXOffset?: number;
37  startYOffset?: number;
38  endXOffset?: number;
39  endYOffset?: number;
40  className?: string;
41};
42 
43export function AnimatedBeam({
44  containerRef,
45  fromRef,
46  toRef,
47  curvature = 0,
48  reverse = false,
49  duration = 3,
50  delay = 0,
51  pathColor = "var(--border)",
52  pathWidth = 2,
53  pathOpacity = 0.2,
54  pathDashArray,
55  gradientStartColor = "var(--primary)",
56  gradientStopColor = "color-mix(in oklch, var(--primary) 40%, transparent)",
57  startXOffset = 0,
58  startYOffset = 0,
59  endXOffset = 0,
60  endYOffset = 0,
61  className,
62}: AnimatedBeamProps) {
63  const id = React.useId();
64  const reduceMotion = useReducedMotion();
65  const [path, setPath] = React.useState("");
66  const [box, setBox] = React.useState({ width: 0, height: 0 });
67 
68  const gradient = reverse
69    ? { x1: ["90%", "-10%"], x2: ["100%", "0%"] }
70    : { x1: ["10%", "110%"], x2: ["0%", "100%"] };
71 
72  React.useEffect(() => {
73    const update = () => {
74      const container = containerRef.current;
75      const from = fromRef.current;
76      const to = toRef.current;
77      if (!container || !from || !to) return;
78 
79      const c = container.getBoundingClientRect();
80      const a = from.getBoundingClientRect();
81// … truncated