Waves

A vertical palette ramp is rippled by a travelling sine wave and roughened with fractal noise, so the bands roll like a swell seen from above. A tidal blue palette is hue-rotated into acid chartreuse, and the cursor opens a lens that pushes the waves aside.

sine bandsfbmlens cursor

Live· lens

Installation

Add it to your project

$

pnpm dlx shadcn@latest add https://funshader.com/r/waves.json

Installs 5 files into components/shaders. The engine is shared, so a second shader only adds its own three files.

Usage

Mount it behind your content

app/hero.tsx

import { WavesShader } from "@/components/shaders/waves/waves-shader";

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <WavesShader className="-z-10" />
      {/* your content */}
    </section>
  );
}

The shader fills its nearest positioned ancestor. Give the parent relative isolate and the shader -z-10 to put it behind everything else. The cursor is tracked on the window, so content on top doesn’t block it.

API reference

Props

Prop	Type	Default	Description
colors	ShaderColor[]	["#031C26", "#1B6CA8", "#5AD2F4", "#EAF9FF"]	Palette, low → high. Hex strings or 0–1 RGB triplets, up to 8.
speed	number	1.33	Multiplier on elapsed seconds.
scale	number	1.16	Zoom. Higher values show more of the field.
intensity	number	0.76	Swell.
paramA	number	0.46	Shader-specific parameter.
warp	number	0.03	Amount of organic domain warp.
detail	number	1.66	Frequency of the warp noise.
contrast	number	0.91	Colour grade: contrast.
brightness	number	0.06	Colour grade: brightness offset.
saturation	number	1.08	Colour grade: saturation.
hue	number	1.5	Hue rotation in radians.
vignette	number	0.36	Edge darkening, 0–1.
blur	number	0.007	Soft 5-tap blur radius.
grain	number	0.02	Film grain amount.
seed	number	4892	Noise seed.
rotation	number	3.39	Field rotation in radians.
drift	number	0.15	Slow positional drift.
oklab	boolean	false	Blend palette colours in OKLab.
offset	[number, number]	[-0.21,0.11]	Pans the field.
cursor	Partial<ShaderCursor>	{"effect":"lens","strength":0.36,"radius":0.63,"follow":"direct"}	Pointer effect: push, lens, swirl, ripple, glow or none.
paused	boolean	false	Freezes the current frame.
maxDpr	number	2	Cap on devicePixelRatio.
respectReducedMotion	boolean	true	Draws a still frame for prefers-reduced-motion.
className	string	—	Classes for the absolutely-positioned wrapper.

Keep exploring

More shaders

05

Mesh Drift

Violet blobs drifting backwards through a warped field.

gaussian blobsfbm warpswirl cursor

03

Mesh Gradient

Soft colour points drifting into one smooth gradient.

mesh gradientOKLabswirl cursor