Border Beam
An animated beam of light which travels along the border of its container.
Installation
Examples
2 Border Beams
Now Playing
Stairway to Heaven - Led Zeppelin
2:458:02
Reverse
Spring Animation
Usage
Props
Border Beam
| Prop | Type | Default | Description |
|---|---|---|---|
className |
string |
- |
Custom class to apply to the component |
size |
number |
50 |
Size of the beam |
duration |
number |
6 |
Duration of the animation in seconds |
delay |
number |
0 |
Delay before the animation starts |
colorFrom |
string |
#ffaa40 |
Start color of the beam gradient |
colorTo |
string |
#9c40ff |
End color of the beam gradient |
transition |
Transition |
- |
Custom motion transition configuration |
style |
React.CSSProperties |
- |
Custom CSS styles to apply |
reverse |
boolean |
false |
Whether to reverse animation direction |
initialOffset |
number |
0 |
Initial offset position (0-100) |
borderWidth |
number |
1 |
Border width of the beam |