Browse components
Dot Wave
A perspective field of dots rolling in layered sine waves, fading into the horizon. Canvas 2D.
Installation
npx shadcn@latest add @glint-ui/dot-waveFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dot-wave.json
Usage
import { DotWave } from "@/components/ui/dot-wave";
<div className="relative h-96">
<DotWave color="#5eead4" farColor="#818cf8" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#5eead4" | Color of the nearest dots. |
| farColor | string | "#818cf8" | Color the dots blend toward on the horizon. |
| speed | number | 1 | Animation speed multiplier. |
| amplitude | number | 1 | Wave height. |
| scale | number | 1 | Wave length; higher means tighter ripples. |
| spacing | number | 1 | Distance between dots; lower is denser. |
| dotSize | number | 2.4 | Radius of the nearest dots in px. |
| className | string | — | Extra classes for the root element. |