A sea of dots on a 3D plane rolling in slow waves to the horizon, swelling up around the cursor.
Into the blue
Customize
Usage
import { DotWave } from "@/components/motionkit/dot-wave";
<DotWave
className="h-[32rem] rounded-3xl pt-24 text-center"
>
<h1>Your hero</h1>
</DotWave>Motion
The exact curves this component runs, plotted with Motion's own maths.
Waves
Runs on its own
Hero sections for data, audio, finance and AI products, and calm full-screen landing backgrounds.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/dot-wave. It saves the file to components/motionkit and installs its dependencies.
Dot Wave is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, it draws one still frame and ignores the pointer. It also stops drawing off screen.
Horizon Grid
A retro perspective grid rolling toward a glowing horizon, synthwave style.
Infinite Perspective Grid
A true 3D floor of glowing lines that recedes forever to a lit horizon, with an optional ceiling for a tunnel.
Constellation
Drifting stars join into constellations as they pass close, and reach out to the cursor with lines of light.
Into the blue
Customize
Usage
import { DotWave } from "@/components/motionkit/dot-wave";
<DotWave
className="h-[32rem] rounded-3xl pt-24 text-center"
>
<h1>Your hero</h1>
</DotWave>Motion
The exact curves this component runs, plotted with Motion's own maths.
Waves
Runs on its own
The live preview is free to explore. Plus unlocks the source for Dot Wave and every other premium component.