Skip to main content
The Simplex Noise shader creates multi-color gradients mapped into smooth, animated curves built as a combination of two Simplex noise functions. Supports up to 10 colors with adjustable stepping and softness for creating organic, flowing patterns.

​
Usage

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

function App() {
  return (
    <SimplexNoise
      colors={['#4449CF', '#FFD1E0', '#F94446', '#FFD36B', '#FFFFFF']}
      stepsPerColor={2}
      softness={0}
      scale={0.6}
      speed={0.5}
    />
  );
}

​
Parameters

​
colors
string[]
Array of base colors in hex format. Supports up to 10 colors. The simplex noise creates flowing patterns between these colors.
​
stepsPerColor
number
default:"2"
Number of extra colors between base colors (1 to 10). 1 = N colors, 2 = 2×N colors, etc. Creates posterization effect when > 1.
​
softness
number
default:"0"
Color transition sharpness (0 to 1). 0 = hard edge with distinct bands, 1 = smooth gradient transitions.
​
speed
number
default:"0.5"
Animation speed multiplier. Controls how fast the noise pattern flows.

​
Common Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions.
​
scale
number
default:"0.6"
Overall zoom level (0.01 to 4). Affects the size of noise patterns.
​
rotation
number
default:"0"
Rotation angle in degrees (0 to 360).
​
offsetX
number
default:"0"
Horizontal offset (-1 to 1).
​
offsetY
number
default:"0"
Vertical offset (-1 to 1).

​
Presets

​
Default

<SimplexNoise
  colors={['#4449CF', '#FFD1E0', '#F94446', '#FFD36B', '#FFFFFF']}
  stepsPerColor={2}
  softness={0}
  scale={0.6}
  speed={0.5}
/>

​
Bubblegum

<SimplexNoise
  colors={['#ffffff', '#ff9e9e', '#5f57ff', '#00f7ff']}
  stepsPerColor={1}
  softness={1.0}
  scale={1.6}
  speed={2}
/>

​
Spots

<SimplexNoise
  colors={['#ff7b00', '#f9ffeb', '#320d82']}
  stepsPerColor={1}
  softness={0.0}
  scale={1.0}
  speed={0.6}
/>

​
First Contact

<SimplexNoise
  colors={['#e8cce6', '#120d22', '#442c44', '#e6baba', '#fff5f5']}
  stepsPerColor={2}
  softness={0.0}
  scale={0.2}
  speed={2}
/>

​
Technical Details

  • Max Colors: 10
  • Noise Algorithm: Dual-layer Simplex noise at different frequencies
  • Stepping: Posterization effect with configurable steps
  • Anti-aliasing: Uses fwidth for smooth edges on stepped transitions
  • Coordinates: Uses pattern UV coordinates with scaling
  • Color Space: Premultiplied alpha for proper transparency blending
The shader combines two simplex noise functions at different scales and offsets to create organic flowing patterns, maps the result to multiple colors with optional stepping, and applies anti-aliased transitions.