Border Beam

An animated border effect — a colorful beam that travels around an element's edge, or a breathing glow that pulses along it. Use it on cards, buttons, or a chat input with mic / stop.

Installation

Terminal

npx gotlui add border-beam

Usage

page.tsx

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

function Card() {
  return (
    <BorderBeam size="md" colorVariant="colorful" theme="dark">
      <div style={{ padding: 16, borderRadius: 16, background: "#1a1a1a" }}>
        Your content here
      </div>
    </BorderBeam>
  )
}

Key props

Prop	Type	Description
size	'sm' \| 'md' \| 'line' \| 'pulse-outside' \| 'pulse-inner'	Preset: sm/md/line travel a beam around the edge; pulse-outside/pulse-inner breathe a glow with no rotation. Demo uses line for the input.
colorVariant	'colorful' \| 'mono' \| 'ocean' \| 'sunset' \| 'forest' \| 'candy' \| 'ice' \| 'gold'	Palette for the beam.
theme	'dark' \| 'light' \| 'auto'	Adapts beam colors to the background; auto follows prefers-color-scheme.
duration	number	Rotation/travel duration in seconds. Default 1.96 (border) / 2.4 (line).
active	boolean	Whether the animation is running. Default true.
borderRadius	number	Custom radius in px — auto-detected from the child if omitted.
brightness	number	Glow brightness multiplier. Default 1.3.
glowSize	number	Multiplies every glow layer's blur radius. Default 1.
strength	number	Overall opacity of the beam/glow (0–1), independent of the children.