A card whose border lights up in the segment nearest the pointer, with a soft bloom spilling both outside and inside. While idle the glow slowly circles the border.
99.98%
uptime over the last 30 days
npx shadcn@latest add https://hyperblur.dev/r/card-border-glow.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-border-glow.tsx.
import { CardBorderGlow } from "@/components/hyperblur/card-border-glow"
<CardBorderGlow><div style={{ padding: 20 }}>Deployments are healthy.</div></CardBorderGlow>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Color of the glowing segment and its bloom. |
| radius | number | 18 | Corner radius of the card in pixels. |
| borderWidth | number | 1.5 | Thickness of the lit border in pixels. |
| arc | number | 76 | Length of the glowing segment in degrees around the card center. |
| bloom | number | 14 | Blur radius of the bloom in pixels. |
| speed | number | 9 | Seconds the idle glow takes to circle the card once. |
| idle | boolean | true | Keep the glow circling while the pointer is away. When false the glow dims instead. |
| children | ReactNode | Card content, rendered above the glow. | |
| ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the root element. |