Shader Mesh Gradient

GPU-rendered mesh gradient: a fragment shader warps multiple OKLCH color blobs through 3-octave simplex noise so they flow continuously instead of locking into a static pattern. Pointer position subtly attracts the nearest blob; reduced-motion freezes a single curated frame; falls back to a static CSS radial gradient on devices without WebGL2.

UniqueUI CLI

npx uniqueui add shader-mesh-gradient

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/shader-mesh-gradient.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Fragment shader · WebGL2

GPU mesh gradient.

Move your cursor — the nearest blob leans in.

Usage

import { ShaderMeshGradient } from "@/components/ui/shader-mesh-gradient";

export default function Example() {
  return (
    <ShaderMeshGradient
      className="h-[460px] w-full rounded-2xl"
      colors={[
        "oklch(0.78 0.16 30)",
        "oklch(0.72 0.17 295)",
        "oklch(0.70 0.16 220)",
        "oklch(0.82 0.14 150)",
      ]}
      speed={1}
      pointerInfluence={0.45}
      grain={0.04}
    >
      <div className="flex h-full w-full items-center justify-center px-6 text-center">
        <div>
          <span className="text-[11px] font-mono uppercase tracking-[0.32em] text-white/80">
            Fragment shader · WebGL2
          </span>
          <h2 className="mt-3 text-4xl font-semibold text-white">
            GPU mesh gradient.
          </h2>
          <p className="mt-2 text-sm text-white/85">
            Move your cursor — the nearest blob leans in.
          </p>
        </div>
      </div>
    </ShaderMeshGradient>
  );
}

Props

Prop	Type	Description
`colors`	`string[]`	3–6 color stops. Accepts hex, rgb()/rgba(), hsl(), or oklch(). Mixed in OKLab space inside the shader for perceptually uniform blends.
`speed`	`number`	Flow speed multiplier. uTime accumulates as deltaTime * speed.
`pointerInfluence`	`number`	How strongly the nearest blob is attracted to the cursor. 0 disables pointer reactivity.
`grain`	`number`	Film grain layered on top of the shader output. 0 disables. Keep below 0.1 to avoid banding.
`className`	`string`	Classes for sizing, rounding, and layout of the canvas wrapper.
`children`	`React.ReactNode`	Overlay content rendered crisply above the shader (text, CTAs, navbars).