Border Beam

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

Installation

npx nyxbui@latest add border-beam

Add the following animations to your tailwind.config.ts file:

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      animation: {
        "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
      },
      keyframes: {
        "border-beam": {
          "100%": {
            "offset-distance": "100%",
          },
        },
      },
    },
  },
};

Usage

Just place the border beam component inside a div with relative positioning, width, and height. You will notice the beam automatically moves around the perimeter of it's container.

import { BorderBeam } from "~/components/ui/border-beam.tsx";
 
export default async function App() {
  return (
    <div className="relative h-[200px] w-[200px] rounded-xl">
      <BorderBeam />
    </div>
  );
}

Props

Border Beam

Prop	Type	Description	Default
className	string	Custom class to apply to the component	-
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