mesh-gradient

Animated mesh gradient with organic distortion and swirl. Renders up to 10 color spots that drift and blend, producing the flowing gradient effect seen on modern landing pages.

Quick Start

import { createMeshGradient } from './gpu-modules/mesh-gradient/mesh-gradient';

const gradient = createMeshGradient(device, { format: 'rgba8unorm' });

// Each frame
gradient.render(targetTexture, {
  time: elapsed,
  colors: [
    [0.9, 0.2, 0.3, 1],
    [0.2, 0.5, 0.9, 1],
    [0.1, 0.8, 0.4, 1]
  ],
  distortion: 0.15
});

gradient.destroy();

API

createMeshGradient(device, options?)

Creates a mesh gradient renderer.

• device — GPUDevice
• options.format — Output texture format. Default 'rgba8unorm'.

Returns { render, destroy }.

render(target, params?)

Renders the gradient into a GPUTexture.

• target — The GPUTexture to render into.
• params.time — Animation time in seconds.
• params.colors — Array of [r, g, b, a] colors (0–1). Up to 10.
• params.distortion — Organic wave distortion strength. 0–1, default 0.15.
• params.swirl — Vortex swirl strength. 0–1, default 0.

How to Modify

• Change the number of color spots: The shader supports up to 10 via the MAX_COLORS constant. To increase, change the uniform buffer size and the array<vec4<f32>, N> in the shader.
• Adjust color spot movement: Edit get_position() in the shader. The default uses sinusoidal paths — change the frequencies or add noise for more organic motion.
• Control blending sharpness: The pow(dist, 3.5) exponent in the fragment shader controls how sharply colors separate. Higher values = harder edges between color regions.
• Use as a background: Render to a texture and sample it in your scene, or render directly to the canvas.