Border Beam

featurefrom MagicUI Effects

Border Beam

AI Usage Rules

Use BorderBeam inside a positioned container (relative) to add animated gradient borders. Requires animate-border-beam keyframe. Great for highlighting cards or sections. The beam travels around the border continuously.

Code Template

import { cn } from "@/lib/utils"

interface BorderBeamProps extends React.ComponentProps<"div"> {
  size?: number
  duration?: number
  anchor?: number
  borderWidth?: number
  colorFrom?: string
  colorTo?: string
  delay?: number
}

export function BorderBeam({ className, size = 200, duration = 15, anchor = 90, borderWidth = 1.5, colorFrom = "#ffaa40", colorTo = "#9c40ff", delay = 0 }: BorderBeamProps) {
  return (
    <div
      style={{
        "--size": size,
        "--duration": duration,
        "--anchor": anchor,
        "--border-width": borderWidth,
        "--color-from": colorFrom,
        "--color-to": colorTo,
        "--delay": `-${delay}s`,
      } as React.CSSProperties}
      className={cn(
        "pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
        "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),conic-gradient(from_calc((var(--anchor)-var(--size)*0.5)*1deg),transparent_0,var(--color-from)_calc(var(--size)*1deg),var(--color-to)_calc(var(--size)*2deg),transparent_0)]",
        "animate-border-beam [animation-delay:var(--delay)]",
        className
      )}
    />
  )
}

Props Schema

Property	Type	Default
size	number	—
colorTo	string	—
duration	number	—
colorFrom	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "size": {
      "type": "number"
    },
    "colorTo": {
      "type": "string"
    },
    "duration": {
      "type": "number"
    },
    "colorFrom": {
      "type": "string"
    }
  }
}