Usage
import { BorderBeam } from "@/registry/components/border-beam/border-beam";
<BorderBeam />Props
| Prop | Type | Default | Description |
|---|---|---|---|
size? | number | 50 | Length of the beam in px. |
duration? | number | 6 | Seconds for one lap. |
delay? | number | 0 | Seconds to offset the start, so several beams can chase each other. |
colorFrom? | string | "var(--glow-from)" | Head color of the beam. |
colorTo? | string | "var(--glow-to)" | Tail color of the beam. |
transition? | Transition | Extra Motion transition options. | |
className? | string | ||
style? | CSSProperties | ||
reverse? | boolean | false | Run counter-clockwise. |
initialOffset? | number | 0 | Start position along the border, 0 to 100. |
borderWidth? | number | 1 | Border width in px. |
When to use
Highlighting one card, input or CTA with a moving light on its border.
When not to use
Several elements at once (it loses meaning).