A dot-grid background with a soft spotlight that follows the cursor and lights up the dots near it.
npx shadcn@latest add https://hyperblur.dev/r/dot-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dot-grid.tsx.
import { DotGrid } from "@/components/hyperblur/dot-grid"
<div className="relative"><DotGrid /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 22 | Pixels between dots. |
| dotColor | string | "rgba(255,255,255,0.08)" | Color of the resting dots. |
| glowColor | string | "#2f7bff" | Color of the spotlight and the lit dots. |
| radius | number | 160 | Spotlight radius in pixels. |
| intensity | number | 0.6 | Spotlight strength from 0 to 1. |