Border Beam

Анимированный луч света, путешествующий вдоль границы контейнера

Превью

Border Beam

Эффект анимированной границы

Луч света плавно движется по периметру карточки, создавая эффектную анимацию.

Установка

npx shadcn@latest add https://gooseui.pro/r/border-beam.json

Использование

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

export function MyCard() {
  return (
    <div className="relative overflow-hidden rounded-lg border p-4">
      <p>Контент карточки</p>
      <BorderBeam />
    </div>
  )
}

Важно: Контейнер должен иметь классы relative и overflow-hidden

Примеры

Разные цвета

Orange → Purple

Cyan → Blue

Green → Yellow

Pink → Red

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

Разная скорость

Быстро (6s)

Нормально (12s)

Медленно (20s)

<BorderBeam duration={6} />  {/* быстро */}
<BorderBeam duration={20} /> {/* медленно */}

Props

Prop	Type	Default
size	number	200
duration	number	12
delay	number	0
colorFrom	string	#ffaa40
colorTo	string	#9c40ff
borderWidth	number	1.5