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.

Grain Gradient combines a multi-color gradient with a choice of 7 animated shape types — wave, dots, truchet, corners, ripple, blob, and sphere. Each shape animates continuously and is distorted by fractal noise. An intensity parameter controls how much the noise warps the color bands, while a noise parameter adds a raw grainy overlay.
Grain is calculated using screen-space coordinates (gl_FragCoord), meaning the grain texture does not scale or rotate with the shader’s sizing parameters.

​
Usage

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

export default function Example() {
  return (
    <GrainGradient
      colorBack="#000000"
      colors={['#7300ff', '#eba8ff', '#00bfff', '#2a00ff']}
      shape="corners"
      softness={0.5}
      intensity={0.5}
      noise={0.25}
      speed={1}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colorBack
string
default:"\"#000000\""
Background color shown behind the gradient shape. Accepts any CSS color string.
​
colors
string[]
Array of CSS color strings. Accepts up to 7 colors, blended through the chosen shape.
​
shape
"wave" | "dots" | "truchet" | "corners" | "ripple" | "blob" | "sphere"
default:"\"corners\""
The animated shape form used to drive the gradient. Each shape animates differently.
  • wave — animated sine wave
  • dots — grid of orbiting dots
  • truchet — randomized arc tile pattern
  • corners — opposing corner blobs
  • ripple — concentric ripple rings
  • blob — organic moving blob
  • sphere — lit 3D sphere with moving light source
​
softness
number
default:"0.5"
Sharpness of transitions between color bands. 0 gives hard edges; 1 gives a smooth gradient. Range 0 to 1.
​
intensity
number
default:"0.5"
How strongly fractal noise distorts the boundaries between color bands. Range 0 to 1.
​
noise
number
default:"0.25"
Strength of the raw grainy noise overlay applied on top of the gradient. Range 0 to 1.
​
speed
number
default:"1"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Starting animation frame in milliseconds.

​
Presets

NameDescription
defaultPresetFour-color purple/blue palette on black using the corners shape.
wavePresetThree-color warm earthy palette on near-black using the wave shape.
dotsPresetFour-color vibrant palette using the dots shape at 0.6× scale.
truchetPresetThree-color palette with maximum grain using the truchet shape.
ripplePresetThree-color palette using the ripple shape at 0.5× scale.
blobPresetThree-color muted palette using the blob shape.
Import presets from @paper-design/shaders-react: 
import { grainGradientPresets } from '@paper-design/shaders-react';

​
Sizing props

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