Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/waves.jsonUsage
import { Waves } from "@/components/dithercn/waves";
export function Footer() {
return (
<footer className="relative isolate min-h-[320px]">
<Waves className="absolute inset-0 -z-10" />
</footer>
);
}Rows of swells roll towards you below the horizon. Distant rows are small and bright, near ones large and dark, and every crest has a one-cell highlight.
Examples
Dusk
A lower horizon, eight layers and a warm palette give a sea at sunset. A smaller amplitude calms the water.
Sound wave
variant="lines" draws thin lines that swell in the middle and taper at both ends. It suits audio players, voice input and anything that listens.
Props
| Prop | Type | Default |
|---|---|---|
| variant Swells under a horizon, or thin lines like a sound wave. | Type: "ocean" | "lines" | Default "ocean" |
| horizon Ocean only. Height of the horizon, from 0 (bottom) to 1 (top). | Type: number | Default 0.62 |
| layers How many waves, from 2 to 8. | Type: number | Default 6 |
| amplitude Height of the waves. 1 is calm, 2 is rough. | Type: number | Default 1 |
| palette Colours from paper to ink: palette names such as "blue", CSS variable names, or any CSS colour. | Type: [DitherColor, DitherColor, ...DitherColor[]] | Default Paper, then tints of --dither-ink |
| matrix The threshold pattern. See Dither engine. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| cell Size of one dither cell in CSS pixels. | Type: number | Default --dither-cell |
| speed How fast it moves. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| className Size and position. The background fills this box. | Type: string | Default – |
Notes
- It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
- With reduced motion turned on, it draws one still frame and stops.
- It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows a CSS approximation in the same colours.
- It costs one small draw per frame at 30 fps, at one pixel per dither cell. See Performance.