Installation
Copy and paste the following code into your project.
// tailwind.config.js
module.exports = {
theme: {
extend: {
animation: {
"border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
},
keyframes: {
"border-beam": {
"100%": {
"offset-distance": "100%",
},
},
},
},
},
};components/magicui/border-beam.tsximport { cn } from "@/lib/utils";
interface BorderBeamProps {
className?: string;
size?: number;
duration?: number;
borderWidth?: number;
anchor?: number;
colorFrom?: string;
colorTo?: string;
delay?: number;
}
export const BorderBeam = ({
className,
size = 200,
duration = 15,
anchor = 90,
borderWidth = 1.5,
colorFrom = "#ffaa40",
colorTo = "#9c40ff",
delay = 0,
}: BorderBeamProps) => {
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={cn(
"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: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-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
className,
)}
/>
);
};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/magicui/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 |