Dot Pattern for React

A grid of small dots behind your content. Dots near the pointer light up in your primary colour and grow, and a slow diagonal wave brightens them in turn, so the page never looks frozen. The dots are a CSS mask and the light is a soft gradient moved underneath it, so moving the pointer costs almost nothing: there's no canvas and no frame loop.

Use it behind a hero or a landing section that should react to the pointer without pulling focus from the headline. For lines instead of dots, use Grid Pattern; for grid cells that light up under the pointer, Interactive Grid Pattern; for dots joined by lines that the pointer pushes aside, Constellation. Dots that blink on their own are Flickering Grid, dots that drift are Particles, and dots whose size pulses are Halftone.

Installation

Usage

import { DotPattern } from "@/components/ui/dot-pattern";

<DotPattern className="min-h-[420px]">
  <h1 className="text-4xl font-semibold">Every component, one install away</h1>
</DotPattern>

Dot Pattern is a container: what you put in it renders on top, and the dots sit behind it. Size it with className like any div; for a full-page backdrop, give it className="fixed inset-0".

Demos

Static

interactive={false} leaves out the pointer light and speed={0} the wave, for a quiet texture: here a card-sized box, faded toward its bottom edge with fade="bottom". fade also takes top, none, and radial, the default, which fades the dots toward every edge.

Color

glowColor is the colour dots near the pointer turn and dotColor the dots' own, both any CSS colour; gap and dotSize set the grid, and proximity how far from the pointer dots light up, in pixels. Here shadcn.io's original cyan, a tighter grid and a wider light, on a scene that stays dark in both themes.

Accessibility

The dots are decoration: hidden from screen readers, and they never take a click, so links and buttons on top keep working. Keep text on top in your foreground colour; the dots are faint and the lit ones small, so a headline stays readable over them, and for body text a fade keeps them away from it. Nothing flashes. With reduced motion the wave stops where it is, leaving a still grid of dots, and the light still follows the pointer, without gliding after it. Touch doesn't light the dots, so scrolling on a phone stays smooth.

FAQ

API Reference