# Dot Wave

> A sea of dots on a 3D plane rolling in slow waves to the horizon, swelling up around the cursor.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/dot-wave

## When to use it

Hero sections for data, audio, finance and AI products, and calm full-screen landing backgrounds.

## How it works

A canvas draws a grid of dots laid on a flat plane in front of a camera: each row is further away, so it lands closer to the horizon and its dots shrink and fade, which is what reads as depth. Every frame, two sine waves crossing at different angles lift the surface, and near the pointer a Gaussian swell raises the dots and spreads them slightly. Far rows draw first, so near dots sit on top.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/dot-wave` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | `"#5FAEB4"` | Dot colour as a hex value. |
| `columns` | `number` | `48` | Dots across the nearest row. |
| `amplitude` | `number` | `0.5` | Height of the waves, 0 to 1. |
| `speed` | `number` | `1` | Wave speed. 0 holds it still. |
| `interactive` | `boolean` | `true` | Swell around the pointer. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas and fade are hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, it draws one still frame and ignores the pointer. It also stops drawing off screen.
- **Colour contrast: Pass.** The top half fades to the background, so content above the horizon sits on solid #0C1010.