Border Beam

Open in

Login

Enter your credentials to access your account.

Installation

Examples

2 Border Beams

Open in

Now Playing

Stairway to Heaven - Led Zeppelin

2:458:02

Reverse

Open in

Login

Enter your credentials to access your account.

Spring Animation

Open in

Usage

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

import { BorderBeam } from "@/components/magicui/border-beam.tsx";
 
export default async function App() {
  return (
    <div className="relative overflow-hidden">
      <BorderBeam />
    </div>
  );
}

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)