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";

<BorderGlow
  mode="cursor"
  palette="iris"
  thickness={2}
  radius={20}
  coneSpread={20}
  glowSize={22}
  intensity={1}
  speed={1}
  cursorRadius={100}
  sparkleCount={15}
  bling={true}
/>