🤎 Enjoying my work? Buy me a coffee to support my coding adventures! ☕


Docs
Border Beam

Border Beam

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

Hero Image

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

PropTypeDescriptionDefault
classNamestringCustom class to apply to the component-
sizenumberSize of the beam300
durationnumberDuration of the animation15
anchornumberAnchor point of the beam90
borderWidthnumberWidth of the beam1.5
colorFromstringStart color of the beam#ffaa40
colorTostringEnd color of the beam#9c40ff
delaynumberDelay before the animation starts0