A dense grid of dots that swell and scatter away from the pointer, then spring back into place with a little overshoot.
Every pixel, in its place.
npx shadcn@latest add https://hyperblur.dev/r/bg-dot-field.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-dot-field.tsx.
import { BgDotField } from "@/components/hyperblur/bg-dot-field"
<div className="relative h-96"><BgDotField /><h1 className="relative">...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | number | 16 | Distance between dots in pixels. Grows automatically on very large areas. |
| size | number | 1.3 | Dot radius in pixels at rest. |
| color | string | "rgba(255,255,255,0.3)" | Dot color at rest. |
| accent | string | "#2f7bff" | Color of the dots near the pointer. |
| radius | number | 110 | Radius of influence in pixels. |
| push | number | 22 | How far dots are pushed at the center, in pixels. |
| grow | number | 1.8 | Extra size near the pointer. 1.8 makes the closest dots 2.8 times larger. |
| speed | number | 1 | Speed of the idle drift. |