# Dot Grid

> A matrix of dots that wakes up under the pointer.

Quiet texture for any section. Dots near the pointer swell and brighten, then settle; an optional ripple keeps it alive on touch screens.

- Family: Backgrounds
- Plan: Free. Free to install, no account.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/dot-grid/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui add dot-grid
```

It installs to `components/galactrex/dot-grid.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { DotGrid } from "@/components/galactrex/dot-grid";

<section className="relative overflow-hidden">
  <DotGrid />
  <h1 className="relative">Hello</h1>
</section>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `gap` | `number` | `22` | Distance between dots in px. |
| `radius` | `number` | `1.1` | Dot radius at rest in px. |
| `reach` | `number` | `120` | Pointer reach in px; 0 turns it off. |
| `wave` | `boolean` | `false` | A slow ripple from the centre. |
| `opacity` | `number` | `0.45` | Dot strength at rest, 0 to 1. |
| `color` | `string` | `"--gxui-muted"` | CSS colour or --gxui-* name. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Pointer.** Swells under a mouse or pen.
- **Wave.** `wave` ripples outward without a pointer.

## Accessibility

- Decorative only and aria-hidden; never takes pointer events (it listens on the parent).

## Motion

- Dots ease toward their target, so the swell trails the pointer.
- Idle with no pointer and no wave.
- Reduced motion: still dots.