magic-ui
components
ui

border-beam

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

animated
gradient
positioning
View Docs

Source Code

Files
border-beam
1import { BorderBeam } from "@/components/magicui/border-beam";
2 
3export function BorderBeamDemo() {
4  return (
5    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
6      <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
7        Border Beam
8      </span>
9      <BorderBeam size={250} duration={12} delay={9} />
10    </div>
11  );
12}