Border Beam
An animated rotating gradient border that brings attention to any card or container.
Installation
Usage
import { BorderBeamCard, BorderBeam } from "@/components/pioneerui/border-beam"
// Pre-built card wrapper
export default function Card() {
return (
<BorderBeamCard>
<h3>Your card content</h3>
</BorderBeamCard>
)
}
// Or add BorderBeam to any existing container
function CustomCard() {
return (
<div className="relative rounded-xl p-6">
Content here
<BorderBeam colorFrom="#6366f1" colorTo="#ec4899" duration={8} />
</div>
)
}Props — BorderBeam
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 50 | Beam head size in pixels |
duration | number | 6 | Animation duration in seconds |
delay | number | 0 | Animation start delay in seconds |
colorFrom | string | #ffaa40 | Gradient start color |
colorTo | string | #9c40ff | Gradient end color |
borderWidth | number | 1.5 | Border width in pixels |
reverse | boolean | false | Reverse animation direction |
initialOffset | number | 0 | Starting position (0–100%) |