Skip to main content
The Mesh Gradient shader creates a flowing composition of color spots that move along distinct trajectories and are transformed by organic distortion. It supports up to 10 colors and provides controls for distortion, swirl effects, and grain overlays.

​
Usage

import { MeshGradient } from '@paper-design/shaders-react';

function App() {
  return (
    <MeshGradient
      colors={['#e0eaff', '#241d9a', '#f75092', '#9f50d3']}
      speed={1}
      distortion={0.8}
      swirl={0.1}
      grainMixer={0}
      grainOverlay={0}
    />
  );
}

​
Parameters

​
colors
string[]
default:"['#e0eaff', '#241d9a', '#f75092', '#9f50d3']"
Array of color hex strings for the gradient spots. Supports up to 10 colors. Each color creates a moving spot that blends with others.
​
distortion
number
default:"0.8"
Power of organic noise distortion applied to the gradient (0 to 1). Higher values create more wavy, organic movement.
​
swirl
number
default:"0.1"
Power of vortex distortion effect (0 to 1). Creates a rotational swirl around the center of the gradient.
​
grainMixer
number
default:"0"
Strength of grain distortion applied to shape edges (0 to 1). Adds texture to the boundaries between color spots.
​
grainOverlay
number
default:"0"
Post-processing black/white grain overlay strength (0 to 1). Adds a film grain effect over the entire gradient.
​
speed
number
default:"1"
Animation speed multiplier. Set to 0 to pause animation and use manual frame control.
​
frame
number
default:"0"
Manual frame counter for when speed is 0. Useful for scrubbing through the animation.

​
Common Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions.
​
scale
number
default:"1"
Overall zoom level of the graphics (0.01 to 4).
​
rotation
number
default:"0"
Overall rotation angle in degrees (0 to 360).
​
offsetX
number
default:"0"
Horizontal offset of the graphics center (-1 to 1).
​
offsetY
number
default:"0"
Vertical offset of the graphics center (-1 to 1).
​
originX
number
default:"0.5"
Reference point for positioning world width in the canvas (0 to 1).
​
originY
number
default:"0.5"
Reference point for positioning world height in the canvas (0 to 1).

​
Presets

The component comes with several built-in presets:

​
Default

<MeshGradient
  colors={['#e0eaff', '#241d9a', '#f75092', '#9f50d3']}
  speed={1}
  distortion={0.8}
  swirl={0.1}
/>

​
Ink

<MeshGradient
  colors={['#ffffff', '#000000']}
  speed={1}
  distortion={1}
  swirl={0.2}
  rotation={90}
/>

​
Purple

<MeshGradient
  colors={['#aaa7d7', '#3c2b8e']}
  speed={0.6}
  distortion={1}
  swirl={1}
/>

​
Beach

<MeshGradient
  colors={['#bcecf6', '#00aaff', '#00f7ff', '#ffd447']}
  speed={0.1}
  distortion={0.8}
  swirl={0.35}
/>

​
Technical Details

  • Max Colors: 10
  • Animation: Continuous flowing motion of color spots
  • Performance: Optimized for real-time rendering
  • Coordinates: Uses object UV coordinates with sizing transforms
The shader calculates positions for each color spot using procedural functions, applies noise-based distortion and vortex rotation, then blends colors using inverse distance weighting for smooth transitions.