Shader Waves

A fluid wave background — a per-pixel multi-layer sine wave field (a software shader) computes a flowing gradient, with optional mouse tracking, grain, and several palettes.

Loading preview…

npx shadcn@latest add https://webberui.com/r/shader-waves.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Color stylevariant

Flow speedspeed

Ripple scalescale

Compute resolutionresolution

128

Follow cursorinteractive

Noise overlaygrain

<ShaderWaves />

Installation

npx shadcn@latest add https://webberui.com/r/shader-waves.json

Or, once registries are configured in components.json, install it as @webberui/shader-waves.

Usage

Put your foreground content in children, and write the layout (centering, height) on className:

import { ShaderWaves } from "@/components/ui/shader-waves";

<ShaderWaves className="flex min-h-[400px] items-center justify-center">
  <h1 className="text-4xl font-bold text-white">Hero heading</h1>
</ShaderWaves>

Switching the palette, enabling mouse tracking and grain, and slowing the flow down:

<ShaderWaves
  variant="sunset"
  interactive
  grain
  speed={0.6}
  className="flex h-[320px] items-center justify-center rounded-2xl"
>
  <p className="text-lg text-white">Warm-toned fluid</p>
</ShaderWaves>

Overriding the built-in palette with your own color stops (they work best ordered dark to light):

<ShaderWaves
  colors={["#0b1120", "#6366f1", "#ec4899", "#f9a8d4"]}
  scale={1.4}
/>

Props

Prop	Type	Default	Description
`variant`	`"aurora" \| "sunset" \| "ocean" \| "mono"`	`"aurora"`	Built-in palette
`colors`	`string[]`	—	Custom gradient color stops (2 or more); overrides `variant` when given
`speed`	`number`	`1`	Flow speed multiplier; 0 or negative falls back to 1
`scale`	`number`	`1`	Wave scale — larger means the waveform stretches out and there are fewer of them
`resolution`	`number`	`128`	Pixel count along the long edge of the internal compute buffer; lower is softer and faster (24–240)
`interactive`	`boolean`	`false`	The wave field follows the mouse slightly (mouse pointers only; touch has no effect)
`grain`	`boolean`	`false`	Overlays low-opacity grain to reduce banding across large gradients
`children`	`React.ReactNode`	—	Foreground content, layered above the waves
`className`	`string`	—	Appended to the outermost container's className

How it works

A software shader: a per-pixel wave field. On an offscreen buffer only resolution pixels along its long edge, multiple sine layers plus domain warping compute the flowing field pixel by pixel, then imageSmoothing scales it smoothly back onto the main canvas — low-resolution math paired with interpolated upscaling naturally produces the softened fluid look, at a cost you can control
The wave field maps onto a 256-step RGB lookup table (baked from the color stops of variant or colors), so coloring each pixel takes just one array lookup instead of recomputing the gradient per cell
The main canvas sizes its backing buffer by devicePixelRatio (capped at 2×), and a ResizeObserver watches the container so the buffer is reallocated the moment the size changes
The whole background layer is pointer-events-none and sits at -z-10 beneath the content (the container has isolate to create its own stacking context), so foreground interaction is completely unaffected
The grain is a data URI of an inline feTurbulence SVG — no extra network request — tiled at 180px and layered over the waves at low opacity
No WebGL and no third-party packages: it is all per-pixel Canvas 2D math, so installing it adds zero extra dependencies

Accessibility

The background is decorative content, and the container's background layer carries aria-hidden, so it does not interfere with assistive technology
With interactive on, the cursor position is normalized to -1 ~ 1 and smoothed by per-frame interpolation to nudge the wave field slightly; it only applies when pointerType === "mouse", so touch devices are unaffected
When the user has "reduce motion" enabled at the system level, the requestAnimationFrame loop and mouse tracking stop and only a single static frame of waves is rendered, with no change to the DOM structure