Docs·Waves Shader Background

Waves Shader Background

A grainy procedural blue wave field with a configurable palette, flow, surface treatment, responsive rendering, and automatic animation pausing.

Installation

$pnpm dlx shadcn@latest add @spiderui/waves-shader-background

Usage

Give the component or its parent an explicit height. Reduced-motion, hidden-tab, and off-screen states automatically render without a continuous animation loop.

API Reference

PropTypeDefault
colorsFour-stop palette from shadow to highlight.
readonly [string, string, string, string]["#031c26", "#1b6ca8", "#5ad2f4", "#eaf9ff"]
speedAnimation speed and direction multiplier.
number-0.727
scaleZoom level of the procedural field.
number2
intensityStrength of the layered wave displacement.
number0.54
warpOrganic domain-warp amount.
number0.042
detailFrequency of the warped noise field.
number1.536
contrastOutput contrast multiplier.
number1.158
saturationOutput color saturation.
number1
brightnessBrightness offset applied after shading.
number0
vignetteDarkening strength toward the canvas edges.
number0.21
grainStatic film-grain intensity.
number0.101
blurSoft five-sample blur applied to the wave field.
number0.002
rotationField rotation in radians.
number5.6549
offsetHorizontal and vertical field translation.
readonly [number, number][0.11, -0.19]
driftSlow orbital movement through the field.
number0.116
pausedRenders a still frame without an animation loop.
booleanfalse
heightCSS height of the background container.
string | number"100%"
childrenOptional content rendered above the shader canvas.
React.ReactNode—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
import { WavesShaderBackground } from "@/components/ui/waves-shader-background"
export function Demo() {
  return (
    <div className="h-[420px] overflow-hidden rounded-3xl">
      <WavesShaderBackground
        colors={["#031c26", "#1b6ca8", "#5ad2f4", "#eaf9ff"]}
        speed={-0.727}
        intensity={0.54}
        grain={0.101}
      />
    </div>
  )
}