Dotted Glow Background

Canvas dot grid where drifting glows brighten dots and tint them toward the brand.

Realtime sync

Every edit, everywhere, instantly

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/dotted-glow-background.json

Adds components/velora/dotted-glow-background.tsx.

A pricing card with a finer, dimmer grid and two glows behind the plan details.

Pro

$24per seat / month

Prop	Type	Default
`gap` Distance between dot centres in px	`number`	`18`
`radius` Dot radius in px (lit dots grow up to 1.6×)	`number`	`1.2`
`opacity` Opacity of unlit dots, 0–1	`number`	`0.25`
`speed` Glow travel speed multiplier	`number`	`1`
`glows` Number of travelling glows	`number`	`3`
`pauseOnHover` Pause while the pointer is over the parent element (focus inside it always pauses)	`boolean`	`true`

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

Reduced motion: No animation runs: one still frame with the glows at fixed positions is drawn, and redrawn on resize and theme change.
Keyboard: Not focusable. The glows stop while focus is inside the parent element (and while it is hovered, unless pauseOnHover is false); they also stop offscreen and in hidden tabs.
Screen readers: Decorative; the wrapper and canvas are aria-hidden, so only the content layered above is announced.