Border Glow

A conic gradient border that spins, with a brighter comet sweep, edge twinkles, an ambient halo, and a cursor-tracked highlight. Honors reduced motion.

Move the cursor around the grid — the arc points toward it across every card at once. Hover a card for bling.

Source

Own every line.

Each component installs as a shadcn registry file — the source lands in your repo, fully editable, with no package wrapping it.

$npx shadcn add button

Registry

Install via URL.

Not on npm. Point npx shadcn add at a registry URL and the files land where they belong.

Motion

Animated by default.

Motion-forward out of the box, and reduced-motion aware so it never fights the user.

Components

40+

Quality

Typed & accessible.

Open license

MIT

Customize

Mode

Palette

Thickness2px

Radius20px

Arc width20°

Glow22px

Intensity1.0

Sweep speed1.0

Cursor radius100px

Sparkles15

Bling

Usage

import { BorderGlow } from "@/components/lazy-ui/border-glow";

// In "cursor" mode every card listens to the pointer, so a whole grid
// lights up wherever the cursor goes â€” not just the card under it.
export function Demo() {
  return (
    <div className="grid grid-cols-2 gap-3">
      {["Own every line.", "Install via URL.", "Animated by default.", "Typed & accessible."].map(
        (title) => (
          <BorderGlow
            key={title}
            mode="cursor"
            cursorRadius={180}
            colors={["#a78bfa", "#f0abfc", "#67e8f9"]}
            radius={16}
          >
            <div className="p-6">
              <h3 className="text-base font-semibold text-white">{title}</h3>
            </div>
          </BorderGlow>
        ),
      )}
    </div>
  );
}