Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

Static Mesh Gradient produces a high-quality mesh gradient from up to 10 color spots. Unlike the animated Mesh Gradient, the spot positions are determined by a seed value (positions) rather than time, making it ideal for static art direction. Two independent sine-wave warp axes distort the mesh, and a mixing parameter controls whether colors blend softly or snap into hard stripes.

​
Usage

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

export default function Example() {
  return (
    <StaticMeshGradient
      colors={['#ffad0a', '#6200ff', '#e2a3ff', '#ff99fd']}
      positions={2}
      waveX={1.0}
      waveXShift={0.6}
      waveY={1.0}
      waveYShift={0.21}
      mixing={0.93}
      grainMixer={0}
      grainOverlay={0}
      rotation={270}
      speed={0}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colors
string[]
Array of CSS color strings for each color spot. Accepts up to 10 colors.
​
positions
number
default:"2"
Seed value that determines the placement of color spots. Range 0 to 100. Different seeds produce different spatial arrangements.
​
waveX
number
default:"1.0"
Strength of sine wave distortion along the X axis. Range 0 to 1.
​
waveXShift
number
default:"0.6"
Phase offset applied to the X-axis wave. Range 0 to 1.
​
waveY
number
default:"1.0"
Strength of sine wave distortion along the Y axis. Range 0 to 1.
​
waveYShift
number
default:"0.21"
Phase offset applied to the Y-axis wave. Range 0 to 1.
​
mixing
number
default:"0.93"
Blending behavior between color spots. 0 produces hard stripes, 0.5 is smooth, 1 gives the most gradual blend. Range 0 to 1.
​
grainMixer
number
default:"0"
Strength of grain distortion applied to color spot edges. Range 0 to 1.
​
grainOverlay
number
default:"0"
Post-processing black/white film grain overlay blended on top of the final color. Range 0 to 1.
​
speed
number
default:"0"
Animation speed multiplier. The default is 0 (static). Set to a non-zero value to animate the warp distortion over time.
​
frame
number
default:"0"
Starting animation frame in milliseconds. Useful for getting a deterministic first frame.

​
Presets

NameDescription
defaultPresetVibrant four-color palette with high waveX/waveY distortion and smooth mixing.
sixtiesPresetEarthy, desaturated palette with no mixing (hard stripes) and heavy grain.
sunsetPresetWarm teal-to-white sunset palette with moderate wave distortion.
seaPresetDeep blue ocean palette with asymmetric wave distortion.
Import presets from @paper-design/shaders-react: 
import { staticMeshGradientPresets } from '@paper-design/shaders-react';

​
Sizing props

Static Mesh Gradient also accepts all ShaderSizingParams (fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, worldHeight). See Sizing and fit for details.