Mesh Drift

Four soft gaussian blobs, one per palette colour, orbit on mismatched sine paths and run in reverse. A light fbm domain warp bends the field so their edges smear into one another like ink in water, and the cursor gently swirls the space around it.

gaussian blobsfbm warpswirl cursor

Live· swirl

Installation

Add it to your project

$

pnpm dlx shadcn@latest add https://funshader.com/r/mesh-drift.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 { MeshDriftShader } from "@/components/shaders/mesh-drift/mesh-drift-shader";

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <MeshDriftShader 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[]	["#10002B", "#5A189A", "#9D4EDD", "#E0AAFF"]	Palette, low → high. Hex strings or 0–1 RGB triplets, up to 8.
speed	number	-0.57	Multiplier on elapsed seconds.
scale	number	1.62	Zoom. Higher values show more of the field.
intensity	number	0.37	Spread.
paramA	number	0.33	Shader-specific parameter.
warp	number	0.28	Amount of organic domain warp.
detail	number	2.98	Frequency of the warp noise.
contrast	number	1.08	Colour grade: contrast.
brightness	number	0	Colour grade: brightness offset.
saturation	number	1	Colour grade: saturation.
hue	number	0	Hue rotation in radians.
vignette	number	0.32	Edge darkening, 0–1.
blur	number	0.007	Soft 5-tap blur radius.
grain	number	0.1	Film grain amount.
seed	number	2812	Noise seed.
rotation	number	1.64	Field rotation in radians.
drift	number	0.18	Slow positional drift.
oklab	boolean	true	Blend palette colours in OKLab.
offset	[number, number]	[0.2,-0.05]	Pans the field.
cursor	Partial<ShaderCursor>	{"effect":"swirl","strength":0.2,"radius":0.46,"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

06

Tunnel

Fly through a rainbow tube of spiralling points.

3D pointsfly-throughfog

04

Waves

Layered sine bands that bend away from your cursor.

sine bandsfbmlens cursor