orix-UIBorder Beam
An animated light beam running along the border of an element.
Preview
Interactive Preview
MAGIC
Installation
Usage
tsx
import { BorderBeam } from "@/components/ui/border-beam"
export default function Demo() {
return (
<div className="relative w-full max-w-sm p-4 rounded-xl border bg-black text-white">
<BorderBeam />
<h3 className="text-lg font-bold">Magic Card </h3>
</div>
)
}Props
| Prop | Type | Default |
|---|---|---|
| size | number | 200 |
| duration | number | 8 |
| borderWidth | number | 2 |
| colorFrom | string | #ffaa40 |
| colorTo | string | #9c40ff |