Border Beam

1"use client";
2 
3import { motion, type Transition, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type BorderBeamProps = Omit<
7  React.HTMLAttributes<HTMLDivElement>,
8  "color"
9> & {
10  /** Side length (px) of the square beam — larger reads as a longer streak. */
11  size?: number;
12  /** Seconds for one full loop around the border. */
13  duration?: number;
14  /** Seconds to delay the start of the loop. */
15  delay?: number;
16  /** Leading edge color of the beam gradient. */
17  colorFrom?: string;
18  /** Trailing edge color of the beam gradient. */
19  colorTo?: string;
20  /** Override the motion transition. */
21  transition?: Transition;
22  /** Border thickness (px) the beam rides along. */
23  borderWidth?: number;
24  /** Travel counter-clockwise instead of clockwise. */
25  reverse?: boolean;
26  /** Starting position along the border, as a percentage (0–100). */
27  initialOffset?: number;
28  /** Render a soft, blurred echo of the beam for a neon glow. */
29  glow?: boolean;
30  /** Use the flowing rainbow gradient (shared with MagicButton). Overrides `colorFrom`/`colorTo`. */
31  rainbow?: boolean;
32};
33 
34// Same hue order as the MagicButton rainbow edge, trailing off to transparent
35// so the moving beam keeps its comet fade.
36const RAINBOW_BEAM =
37  "linear-gradient(to left, var(--rainbow-1), var(--rainbow-5), var(--rainbow-3), var(--rainbow-4), transparent)";
38 
39const BorderBeam = React.forwardRef<HTMLDivElement, BorderBeamProps>(
40  (
41    {
42      className,
43      style,
44      size = 60,
45      duration = 6,
46      delay = 0,
47      colorFrom = "var(--chart-1)",
48      colorTo = "var(--chart-5)",
49      transition,
50      borderWidth = 1,
51      reverse = false,
52      initialOffset = 0,
53      glow = false,
54      rainbow = true,
55      ...props
56    },
57    ref,
58  ) => {
59    const reduceMotion = useReducedMotion();
60 
61    // A square rides the padding-box border path; animating `offset-distance`
62    // sweeps it around, and the mask reveals only the border ring.
63    const beamStyle = {
64      width: size,
65      offsetPath: `rect(0 auto auto 0 round ${size}px)`,
66      "--color-from": colorFrom,
67      "--color-to": colorTo,
68      ...(rainbow ? { background: RAINBOW_BEAM } : null),
69      ...style,
70    } as React.CSSProperties;
71 
72    // The rainbow look paints via `background`; the two-color look via utilities.
73    const beamGradient = rainbow
74      ? ""
75      : "bg-linear-to-l from-(--color-from) via-(--color-to) to-transparent";
76 
77    const animate = reduceMotion
78// … truncated