## Dot Grid (S—038)

A dot-matrix background that leans away from the cursor, glows near it and ripples on every click.

- URL: https://sundaeui.dev/components/dot-grid
- Category: Backgrounds & effects · Art direction: Understated
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/dot-grid.json`
- Tags: grid, cursor, interactive, canvas, animated, background, react

A quiet grid of dots that comes alive under your hand. Dots inside the cursor’s radius are pushed outward and warm to the accent colour. Each is on its own spring, so the field settles smoothly when the pointer leaves. Clicks and taps send a ripple ring across the grid.
It costs nothing at rest. The animation loop only runs while something is moving and stops completely when the grid has settled. It is one canvas, DPR-aware and resize-aware, and with reduced motion it stays as a static grid.
Use it behind hero copy, empty states and sign-in screens where a little responsiveness makes the page feel alive.

### Usage

```tsx
import { DotGrid } from '@/components/sundae/dot-grid'

<DotGrid className="min-h-[60vh]" activeColor="#ea580c" gap={22}>
  <Hero />
</DotGrid>
```

### Props

- `gap` (`number`, default `22`): Spacing in px.
- `dotColor / activeColor` (`string`): Resting and active colours.
- `radius` (`number`, default `140`): Cursor influence radius.
- `push` (`number`, default `14`): Push strength.
- `ripple` (`boolean`, default `true`): Ripple on click or tap.
- `autoplay` (`boolean`): A virtual pointer drifts on a figure-eight, for idle heroes and previews.
- `children` (`ReactNode`): Content above the grid.

### Accessibility

- The canvas is aria-hidden decoration.
- No motion runs for reduced-motion users.