Docs
Border Beam
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 |