Border Beam

An animated beam of light which travels along the border of its container.

Usage

Code

import { cnBase } from "tailwind-variants";

interface BorderBeamProps {
  className?: string;
  size?: number;
  duration?: number;
  borderWidth?: number;
  anchor?: number;
  colorFrom?: string;
  colorTo?: string;
  delay?: number;
}

export const BorderBeam: React.FC<BorderBeamProps> = ({
  className,
  size = 200,
  duration = 15,
  anchor = 90,
  borderWidth = 3,
  colorFrom = "#ffaa40",
  colorTo = "#9c40ff",
  delay = 0,
}) => {
  return (
    <div
      style={
        {
          "--size": size,
          "--duration": duration,
          "--anchor": anchor,
          "--border-width": borderWidth,
          "--color-from": colorFrom,
          "--color-to": colorTo,
          "--delay": `-${delay}s`,
        } as React.CSSProperties
      }
      className={cnBase(
        "pointer-events-none absolute inset-0 rounded-[inherit]",
        "[border:calc(var(--border-width)*1px)_solid_transparent]",
        // mask styles
        "![mask-clip:padding-box,border-box] ![mask-composite:intersect]",
        "[mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
        // pseudo styles
        "after:absolute after:aspect-square after:[offset-anchor:calc(var(--anchor)*1%)_50%]",
        "after:w-[calc(var(--size)*1px)] after:animate-border-beam",
        "after:[animation-delay:var(--delay)] ",
        "after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)]",
        "after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
        className,
      )}
    />
  );
};

Update `tailwind.config.js`

Add the following animations to your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
      },
      keyframes: {
        "border-beam": {
          "100%": {
            "offset-distance": "100%",
          },
        },
      },
    },
  },
};

Props

Attribute	Type	Description	Default
className	`string`	Custom class to apply to the component	`undefined`
size	`number`	Size of the beam	`300`
duration	`number`	Duration of the animation	`15`
anchor	`number`	Anchor point of the beam	`90`
borderWidth	`number`	Width of the beam	`1.5`
colorFrom	`string`	Start color of the beam	`#ffaa40`
colorTo	`string`	End color of the beam	`#9c40ff`
delay	`number`	Delay before the animation starts	`0`

Border Beam

Usage

Code

Update tailwind.config.js

Props

Update `tailwind.config.js`