Dot Grid

Free

A canvas dot grid where ripples travel out from the pointer, and from random spots when it is idle.

Make some waves

Move or click over the grid

Customize

Gap24px

Pointer glow120px

Dot size1.6px

Wave color#ff784f

npx shadcn@latest add https://ui.mekaigames.com/r/dot-grid.json

Works in any project set up with the shadcn CLI.

import { DotGrid } from "@/components/ui/dot-grid";

<section className="relative h-[600px]">
  <DotGrid gap={24} activeColor="#ff784f" />
</section>

6 properties

Property	Type	Default	Description
color	string	"#3d3631"	Resting dot color as a hex value.
activeColor	string	"#ff784f"	Color dots reach at the crest of a ripple.
gap	number	24	Distance between dots in pixels.
dotSize	number	1.6	Dot radius at rest in pixels.
radius	number	120	Radius of the glow that follows the pointer, in pixels.
className	string	—	Extra classes for the canvas. It fills its nearest positioned parent.

Dependencies: motion