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.

Mesh Gradient renders up to 10 color spots that glide along independent trajectories. Organic noise distortion and a vortex swirl warp their positions, while two grain controls let you add texture to color edges or apply a classic film-grain overlay.

​
Usage

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

export default function Example() {
  return (
    <MeshGradient
      colors={['#e0eaff', '#241d9a', '#f75092', '#9f50d3']}
      distortion={0.8}
      swirl={0.1}
      grainMixer={0}
      grainOverlay={0}
      speed={1}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colors
string[]
Array of CSS color strings for each color spot. Accepts up to 10 colors. Supports any valid CSS color format including hex with alpha (e.g. #ff000080).
​
distortion
number
default:"0.8"
Power of organic noise distortion applied to color spot positions. Range 0 to 1, where 0 means no distortion and 1 is maximum.
​
swirl
number
default:"0.1"
Power of vortex (swirl) distortion. 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:"1"
Animation speed multiplier. Set to 0 to pause. Negative values play the animation in reverse.
​
frame
number
default:"0"
Starting animation frame in milliseconds. Useful for getting a deterministic first frame.

​
Presets

NameDescription
defaultPresetFour-color palette (blue, indigo, pink, purple) with moderate distortion.
inkPresetHigh-contrast black-and-white with heavy distortion and 90° rotation.
purplePresetTwo-color deep purple scheme with maximum swirl.
beachPresetSlow-moving aqua and gold palette.
Import presets from @paper-design/shaders-react: 
import { meshGradientPresets } from '@paper-design/shaders-react';

​
Sizing props

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