Waves
A static line pattern for sharp zigzags, smooth waves, and abstract textures.
Customize
Installation
pnpm dlx shadcn@latest add @vivid-layer/wavesUsage
Give the parent element an explicit size. The shader fills the available width and height without taking ownership of positioning or page layout.
import { Waves } from "@/components/effects/waves"
export function WavesExample() {
return (
<div className="h-96 overflow-hidden rounded-xl">
<Waves />
</div>
)
}API reference
The wrapper adds runtime safeguards while preserving the complete Paper
Waves API. This includes its wave geometry, color, sizing, pixel-ratio, and
styling props. See the
Paper Waves reference for the full prop
table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
width / height | number | string | "100%" | Sets the canvas CSS dimensions. Size the parent element to establish the visible area. |
maxPixelCount | number | 2073600 | Caps the rendered pixel budget. Override only after measuring the target devices. |
Accessibility
The shader is decorative by default: it is hidden from assistive technology and does not receive pointer events. Do not use its pattern or colors as the only way to communicate information, and verify the contrast of overlaid copy.
Performance
The shader is static and does not require a continuous animation loop. The
default maxPixelCount still limits rendering to approximately 1080p. Use
static posters rather than live WebGL in dense component grids.
Browser fallback
The component renders a palette-matched CSS wave pattern during server rendering and while capability detection runs. It mounts Paper only when WebGL2 is available; unsupported browsers keep the static fallback.
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. vivid-layer supplies the React adapter, fallback, documentation, and Registry packaging; it does not vendor or modify Paper's shader source.