Border Beam

import React from "react";
import { cn } from "@/lib/utils";
 
interface TracingBeamProps {
  className?: string;
  length?: number;
  duration?: number;
  borderWidth?: number;
  colorFrom?: string;
  colorVia?: string;
  colorTo?: string;
}
 
/**
 * TracingBeam Component
 *
 * A component that renders a tracing beam effect.
 *
 * @property {string} [className] - Additional CSS classes to apply to the component.
 * @property {number} [length=200] - Length of the beam in pixels.
 * @property {number} [duration=15] - Duration of the animation in seconds.
 * @property {string} [colorFrom="#ff4500"] - Starting color of the beam gradient.
 * @property {string} [colorVia="#ff8c00"] - Middle color of the beam gradient.
 * @property {string} [colorTo="#ffd700"] - Ending color of the beam gradient.
 */
export const BorderBeam = ({
  className,
  length = 200,
  duration = 12,
  colorFrom = "#ff4500", // Bright orange-red
  colorVia = "#ff8c00", // Orange
  colorTo = "#ffd700", // Gold
}: TracingBeamProps) => {
  const fadeLength = Math.round(length * 0.25);
  const blurAmount = Math.round(length * 0.05);
  const extendedLength = length + fadeLength * 2;
 
  const cssVariables = {
    "--length": extendedLength,
    "--duration": duration,
    "--color-from": colorFrom,
    "--color-via": colorVia,
    "--color-to": colorTo,
    "--fade-length": `${fadeLength}px`,
    "--blur-amount": `${blurAmount}px`,
  } as React.CSSProperties;
 
  const beamStyles = cn(
    // Masking for smooth edges and to respect parent's border radius
    "![mask-clip:padding-box,border-box]",
    "![mask-composite:intersect]",
    "[mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
 
    // Beam effect created using a pseudo-element
    "after:absolute",
    "after:aspect-square",
    "after:w-[calc(var(--length)*1px)]",
    "after:animate-border-beam",
 
    // Gradient background for the beam with smooth fade in/out
    "after:[background:linear-gradient(to_left,transparent,transparent_var(--fade-length),var(--color-from),var(--color-via),var(--color-to),transparent_calc(100%_-_var(--fade-length)),transparent)]",
 
    // Apply blur effect for a softer, glowing appearance
    "after:[filter:blur(var(--blur-amount))]",
 
    // Define the path of the beam animation
    "after:[offset-path:rect(0_auto_auto_0_round_calc(var(--length)*1px))]"
  );
 
  return (
    <div
      style={cssVariables}
      className={cn(
        "pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(1.5*1px)_solid_transparent]",
        beamStyles,
        className
      )}
    />
  );
};