Beam Draw

1"use client";
2 
3import {
4  motion,
5  useReducedMotion,
6  useScroll,
7  useSpring,
8  useTransform,
9} from "framer-motion";
10import * as React from "react";
11 
12export type BeamDrawProps = Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
13  /** SVG path `d` strings drawn along scroll progress. Sensible default beams if omitted. */
14  paths?: string[];
15  /** Stroke width of each beam. Defaults to 2. */
16  strokeWidth?: number;
17};
18 
19// SPRING.smooth — surfaces / shared-layout feel.
20const SPRING = { stiffness: 320, damping: 32, mass: 0.9 } as const;
21 
22// A flowing default beam set on a 1000×400 canvas, fanning out from the left.
23const DEFAULT_PATHS = [
24  "M0 200 C 250 200, 350 60, 600 60 S 900 40, 1000 40",
25  "M0 200 C 250 200, 350 140, 600 140 S 900 150, 1000 150",
26  "M0 200 C 250 200, 350 260, 600 260 S 900 250, 1000 250",
27  "M0 200 C 250 200, 350 340, 600 340 S 900 360, 1000 360",
28];
29 
30const BeamDraw = React.forwardRef<SVGSVGElement, BeamDrawProps>(
31  ({ paths = DEFAULT_PATHS, strokeWidth = 2, className, ...props }, ref) => {
32    const reduce = useReducedMotion();
33    const containerRef = React.useRef<SVGSVGElement>(null);
34    React.useImperativeHandle(ref, () => containerRef.current as SVGSVGElement);
35 
36    const { scrollYProgress } = useScroll({
37      // useScroll's target types expect an HTMLElement ref; the SVG root works
38      // the same at runtime (getBoundingClientRect).
39      target: containerRef as unknown as React.RefObject<HTMLElement>,
40      offset: ["start end", "end start"],
41    });
42    const pathLength = useSpring(
43      useTransform(scrollYProgress, [0.1, 0.8], [0, 1]),
44      SPRING,
45    );
46 
47    return (
48      <svg
49        ref={containerRef}
50        data-slot="beam-draw"
51        viewBox="0 0 1000 400"
52        fill="none"
53        aria-hidden="true"
54        className={`w-full [filter:drop-shadow(0_0_8px_color-mix(in_oklch,var(--primary)_50%,transparent))] ${className ?? ""}`}
55        {...props}
56      >
57        {paths.map((d, i) => (
58          <motion.path
59            // biome-ignore lint/suspicious/noArrayIndexKey: path list is positional and static.
60            key={i}
61            d={d}
62            stroke="var(--primary)"
63            strokeWidth={strokeWidth}
64            strokeLinecap="round"
65            style={{ pathLength: reduce ? 1 : pathLength }}
66          />
67        ))}
68      </svg>
69    );
70  },
71);
72BeamDraw.displayName = "BeamDraw";
73 
74export { BeamDraw };