Border Beam

Docs

Border Beam

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

Enter your credentials to access your account.

Installation

Now Playing

Stairway to Heaven - Led Zeppelin

2:458:02

Enter your credentials to access your account.

import { BorderBeam } from "@/components/magicui/border-beam";

<div className="relative h-[500px] w-full overflow-hidden">
  <BorderBeam />
</div>

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

Contribute