Border Beam

npm install motion

"use client";

import { motion, useReducedMotion } from "motion/react";

type BorderBeamProps = {
  /** Length of the beam in pixels. */
  size?: number;
  /** Seconds for one lap of the border. */
  duration?: number;
  /** Seconds to wait before the first lap. Offset several beams to stagger them. */
  delay?: number;
  /** Colour at the head of the beam. */
  colorFrom?: string;
  /** Colour the tail fades through. */
  colorTo?: string;
  /** Border thickness in pixels. */
  borderWidth?: number;
  /** Corner radius of the element it sits in, so the beam follows the curve. */
  radius?: number;
  /** Travel anticlockwise. */
  reverse?: boolean;
};

/**
 * A small light that travels around the border of whatever it sits in.
 * Place it as the last child of any element with position: relative.
 */
export function BorderBeam({
  size = 80,
  duration = 6,
  delay = 0,
  colorFrom = "#5FAEB4",
  colorTo = "#A56D5B",
  borderWidth = 1.5,
  radius = 16,
  reverse = false,
}: BorderBeamProps) {
  const reduceMotion = useReducedMotion();
  if (reduceMotion) return null;

  return (
    <div
      aria-hidden
      className="pointer-events-none absolute inset-0"
      style={{
        borderRadius: radius,
        // cut the middle out, so the beam only ever shows on the border
        padding: borderWidth,
        WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
        WebkitMaskComposite: "xor",
        maskComposite: "exclude",
      }}
    >
      {/* the beam rides a rounded-rectangle path, so it keeps a steady speed on any shape */}
      <motion.div
        className="absolute aspect-square"
        style={{
          width: size,
          offsetPath: `rect(0 auto auto 0 round ${radius}px)`,
          // the head leads in the direction of travel, with the tail fading out behind it
          background: `linear-gradient(to ${reverse ? "right" : "left"}, ${colorFrom}, ${colorTo}, transparent)`,
        }}
        initial={{ offsetDistance: reverse ? "100%" : "0%" }}
        animate={{ offsetDistance: reverse ? ["100%", "0%"] : ["0%", "100%"] }}
        transition={{ duration, delay, repeat: Infinity, ease: "linear" }}
      />
    </div>
  );
}