Mesh Gradient

High-performance GPU-accelerated WebGL 3D Simplex noise fluid shader that dynamically warps with pointer interaction.

Interactive Playground

Move cursor over canvas to interact

Variant

Fluid Speed0.4x

Noise Distortion0.65

Film Grain0.04

Pointer Warp

Anatomy

import { MeshGradient } from "@shavin/fx";

// 1. Theme-bound (Auto adapts to light/dark tokens)
<div className="relative w-full h-80 rounded-[var(--radius-panel)] overflow-hidden">
  <MeshGradient
    speed={0.4}
    distortion={0.65}
    grain={0.05}
    interactive={true}
    className="w-full h-full"
  />
</div>

// 2. Custom 4-Anchor Palette
<MeshGradient
  colors={["#52b788", "#2d6a4f", "#74c69d", "#081c15"]}
  speed={0.3}
  distortion={0.5}
/>

Examples

Theme-Aware Fluid Shader

WebGL simplex noise fluid shader bound to active theme token colors.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline">
  <MeshGradient
    speed={0.3}
    distortion={0.5}
    grain={0.04}
    interactive={true}
    className="w-full h-full"
  />
</div>

Custom 4-Anchor Palette (Aurora Emerald)

Custom 4-stop harmonic colors passed as hex or CSS token array.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline">
  <MeshGradient
    colors={["#52b788", "#2d6a4f", "#74c69d", "#081c15"]}
    speed={0.35}
    distortion={0.6}
    grain={0.04}
    interactive={true}
    className="w-full h-full"
  />
</div>

Props Reference

Prop	Type	Default	Description
colors	string[] \| "theme" \| "accent-dark" \| "accent-light" \| { light: string[]; dark: string[] }	"theme"	Array of up to 4 colors, theme preset string, or dual-mode { light, dark } palette.
speed	number	0.4	Fluid animation time rate multiplier.
distortion	number	0.6	Simplex noise wave displacement amplitude.
grain	number	0.04	Film grain & dither intensity (0.0 to 0.2).
interactive	boolean	true	Enables pointer warp displacement.