Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Border Beam

Border Beam

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

Border Beam

Installation

npx shadcn@latest add "https://magicui.design/r/border-beam"

Usage

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.

import { BorderBeam } from "@/components/magicui/border-beam.tsx";
 
export default async function App() {
  return (
    <div className="relative h-[200px] w-[200px] rounded-xl">
      <BorderBeam />
    </div>
  );
}

Props

Border Beam

PropTypeDescriptionDefault
classNamestringCustom class to apply to the component-
sizenumberSize of the beam300
durationnumberDuration of the animation15
anchornumberAnchor point of the beam90
borderWidthnumberWidth of the beam1.5
colorFromstringStart color of the beam#ffaa40
colorTostringEnd color of the beam#9c40ff
delaynumberDelay before the animation starts0

Credits

  • Credit to @linear where I first saw this effect.
  • Credit to @jh3yy for sharing his implementation of this effect.