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

Interactive Playground

Preview

Playground

Credits