Border Beam

New

An animated beam of light traveling along the container border

Preview

Border Beam

Animated border effect

A beam of light smoothly moves around the perimeter of the card, creating an impressive animation

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/border-beam

Usage

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

export function MyCard() {
  return (
    <div className="relative overflow-hidden rounded-lg border p-4">
      <p>Card content</p>
      <BorderBeam />
    </div>
  )
}

Important: Container must have relative and overflow-hidden classes

Examples

Different colors

Orange → Purple

Cyan → Blue

Green → Yellow

Pink → Red

<BorderBeam colorFrom="#00ffff" colorTo="#0066ff" />

Different speeds

Fast (6s)

Normal (12s)

Slow (20s)

<BorderBeam duration={6} />  {/* fast */}
<BorderBeam duration={20} /> {/* slow */}

Props

Prop	Type	Default	Description
size	number	200	Beam size in pixels
duration	number	12	Animation duration in seconds
delay	number	0	Animation delay in seconds
colorFrom	string	#ffaa40	Gradient start color
colorTo	string	#9c40ff	Gradient end color
borderWidth	number	1.5	Border width in pixels