Motion UIComponentsComponent

Border beam

A thin arc of light that sweeps the rounded border of any panel.

npx shadcn@latest add @motion/border-beam

API reference

Components

<BorderBeam />

Wrapper that traces an animated beam around a panel's rounded border.

size?

number = 120

Angular length of the lit streak, in degrees. Defaults to 120.

duration?

number = 6

Seconds for one full lap. Defaults to 6.

thickness?

number = 3

Thickness of the rim, in px. Defaults to 3.

delay?

number = 0

Phase offset in seconds. Defaults to 0.

active?

boolean = true

Run the beam when true. Defaults to true.

className?

string

Merged onto the wrapping element.

children

ReactNode

The panel the beam traces.