Effects/BorderBeam
BorderBeam
An animated light beam that orbits a card's border. Eye-catching and minimal — great for feature cards, pricing tables, or any card you want to draw attention to.
import { BorderBeam } from "@animui/ui"Basic
BorderBeam
A spark travels around the border.
Custom colors
Amber → Red beam
Staggered grid
Card 1
Card 2
Card 3
Card 4
Props
| Prop | Type | Default | Description |
|---|---|---|---|
colorFrom | string | "#8b5cf6" | Start color of the beam gradient. |
colorTo | string | "#3b82f6" | End color of the beam gradient. |
size | number | 80 | Beam length in degrees. |
duration | number | 3 | Seconds for one full orbit. |
delay | number | 0 | Animation start delay in seconds. |
borderWidth | number | 1.5 | Border width in px. |
className | string | — | Additional classes. |