Glowing Effect

Border glow that follows the pointer around a card's edge as it comes near.

Bring the cursor near any edge and the border lights up where you are.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/glowing-effect.json

Adds components/velora/glowing-effect.tsx.

Six feature cards in a three-column grid, each lighting up as the pointer nears it.

Ships static HTML and hydrates only what moves.

Seven CSS variables re-skin every component.

Keyboard paths and reduced-motion states built in.

Most components weigh under 2 KB gzipped.

Plain React and Tailwind, no wrappers to fight.

Copy it, change it, ship it commercially.

Prop	Type	Default
`proximity` Distance in px outside the card at which the glow starts to fade in	`number`	`64`
`spread` Length of the lit arc, in degrees of the border	`number`	`80`
`borderWidth` Thickness of the glowing border in px	`number`	`2`
`halo` Add a soft blurred halo behind the lit border	`boolean`	`true`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: The arc stops following the pointer; hovering the card shows a soft glow around the whole border instead.
Keyboard: The effect is not focusable; the full border lights up while the card or anything inside it has keyboard focus.
Screen readers: The glow layer is aria-hidden and ignores pointer events; only the card content is read.