Border Beam

An animated beam of light which travels along the border of its container.

Credits

Shout out to Magic UI for the inspiration. I actually discovered this package while browsing their website.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

Usage

Basic

Just place the border beam component inside a div with relative positioning, width, and height. You will notice the beam automatically moves around the perimeter of it's container.

Login

Enter your credentials to access your account.

2 Border Beams

Now Playing

Stairway to Heaven - Led Zeppelin
2:458:02

Reverse

Login

Enter your credentials to access your account.

Spring Animation