Border Beam
OfficialAn animated beam effect that travels along the border of a container. Perfect for highlighting cards, buttons, or any element that needs attention.
Freeanimationborderbeamglowhighlightcards
2 downloadsOonkooUI Team
Installation
Run the following command:
npx oonkoo add border-beamProps
BorderBeam Props
| Prop | Type | Default |
|---|---|---|
| size | number | 50 |
| duration | number | 6 |
| delay | number | 0 |
| colorFrom | string | "#46CB76" |
| colorTo | string | "#f2ff40" |
| transition | Transition | - |
| className | string | - |
| style | React.CSSProperties | - |
| reverse | boolean | false |
| initialOffset | number | 0 |
| borderWidth | number | 1 |
Usage
Copy and paste the following code to use this component:
import { BorderBeam } from "@/components/oonkoo/border-beam";
<div className="relative overflow-hidden rounded-xl border p-6">
<BorderBeam size={100} duration={6} colorFrom="#46CB76" colorTo="#f2ff40" />
Your card content
</div>