# Dot grid

A dot field that bulges around the cursor like a lens and ripples from every click.

- ID: `dot-grid`
- Import: `animui/dot-grid`
- Category: Special
- Runtime exports: `DotGrid`
- Declaration: `types/pro/dot-grid.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: stretch-refresh

```tsx
import { DotGrid } from 'animui/dot-grid';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info dot-grid` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface DotGridProps {
  gap?: number;
  dotSize?: number;
  radius?: number;
  strength?: number;
  ripple?: boolean;
  fade?: boolean;
  color?: string;
  activeColor?: string;
  children?: ReactNode;
  className?: string;
  style?: CSSProperties;
}

export declare const DotGrid: ComponentType<DotGridProps>;

export default DotGrid;
```