Dot Grid Background

Interactive dot-grid pattern with a glowing cursor-following effect.

UniqueUI CLI

npx uniqueui add dot-grid-background

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/dot-grid-background.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Move your cursor

Ripple Field

Each movement fires a shockwave through the grid

Usage

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

export default function Example() {
  return (
    <DotGridBackground className="w-full h-[340px] flex items-center justify-center rounded-xl">
      <div className="text-center relative z-10 select-none px-6">
        <p className="text-xs font-mono tracking-[0.25em] uppercase mb-4 text-neutral-500">
          Move your cursor
        </p>
        <h3 className="text-4xl font-bold tracking-tight text-white">
          Ripple Field
        </h3>
        <p className="mt-3 text-sm text-neutral-500">
          Each movement fires a shockwave through the grid
        </p>
      </div>
    </DotGridBackground>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	Components mapped into the z-index layer visually above the matrix.
`className`	`string`	Container abstraction classes.
`dotColor`	`string`	Color code controlling the default un-illuminated grid representation.
`dotSize`	`number`	Diameter specifying visual footprint density of single grid intersections.
`gap`	`number`	Vector translation pixel count separating independent grid items.
`hoverRadius`	`number`	Spread area around the cursor triggering focus interactions.
`hoverScale`	`number`	Float magnitude expanding intersections actively caught inside the hover bounds.