The DotPattern component tiles a grid of dots behind your content and lights the ones nearest the pointer, using a masked second copy of the same grid so the bright dots land exactly on the dim ones.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/dot-pattern.jsonEverything Dot Pattern accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | number | 20 | Distance between dot centres, in pixels |
| dotSize | number | 1.4 | Diameter of each dot, in pixels |
| glow | boolean | true | Light the dots nearest the pointer |
| glowRadius | number | 160 | Radius of the lit area around the pointer, in pixels |
| className | string | '' | Additional CSS classes. Set the dot colour here, e.g. text-foreground |
The same grid twice, with the bright copy masked to a circle around the pointer.