BorderBeam
An animated beam effect that travels around the border of a container. Place inside an element
with position: relative and overflow: hidden.
Basic Usage
Content goes here
Custom Colors
Customize the gradient colors with colorFrom and colorTo.
Orange → Purple
Cyan → Blue
Pink → Yellow
Animation Speed
Control speed with the duration prop (in seconds).
Fast (5s)
Default (15s)
Slow (30s)
Size & Border Width
Adjust size (beam size) and borderWidth.
Small beam
Large beam
Thick border
Multiple Beams
Combine multiple beams with different delay values.
Dual beam effect