Skip to main content
Simplex Noise drives a color gradient through two layered simplex noise fields that animate over time. Colors cycle continuously through the noise field, and a stepsPerColor parameter lets you posterize the gradient into discrete bands. A softness control adjusts how sharply each band transitions to the next.

​
Usage

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

export default function Example() {
  return (
    <SimplexNoise
      colors={['#4449CF', '#FFD1E0', '#F94446', '#FFD36B', '#FFFFFF']}
      stepsPerColor={2}
      softness={0}
      scale={0.6}
      speed={0.5}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colors
string[]
Array of CSS color strings cycled through the noise field. Accepts up to 10 colors.
​
stepsPerColor
number
default:"2"
Number of discrete steps (bands) interpolated between each adjacent pair of colors. 1 gives one band per color; higher values posterize the gradient into more bands. Range 1 to 10.
​
softness
number
default:"0"
Sharpness of the transition between color bands. 0 gives a hard edge; 1 gives a smooth gradient. Range 0 to 1.
​
speed
number
default:"0.5"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Starting animation frame in milliseconds.

​
Presets

NameDescription
defaultPresetFive-color retro palette with 2 steps per color and hard edges.
spotsPresetThree-color warm palette showing the noise as distinct blobs.
firstContactPresetFive-color dark moody palette at a very small scale.
bubblegumPresetFour-color pastel palette with smooth softness and fast animation.
Import presets from @paper-design/shaders-react: 
import { simplexNoisePresets } from '@paper-design/shaders-react';

​
Sizing props

Simplex Noise uses pattern sizing by default (fit: 'none'). It also accepts all ShaderSizingParams (fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, worldHeight). See Sizing and fit for details.

Build docs developers (and LLMs) love

Get started for freeTalk to us