Skip to main content
The Perlin Noise shader implements the classic 3D Perlin noise algorithm with full control over octaves, persistence, and lacunarity. Perfect for creating natural, flowing patterns like water, clouds, marble, or organic textures.

​
Usage

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

function App() {
  return (
    <PerlinNoise
      colorFront="#fccff7"
      colorBack="#632ad5"
      proportion={0.35}
      softness={0.1}
      octaveCount={1}
      persistence={1}
      lacunarity={1.5}
      speed={0.5}
    />
  );
}

​
Parameters

​
colorFront
string
default:"'#fccff7'"
Foreground color in hex format. Appears in the bright areas of the noise pattern.
​
colorBack
string
default:"'#632ad5'"
Background color in hex format. Appears in the dark areas of the noise pattern.
​
proportion
number
default:"0.35"
Blend point between 2 colors (0 to 1). 0.5 = equal distribution, lower values show more foreground, higher values show more background.
​
softness
number
default:"0.1"
Color transition sharpness (0 to 1). 0 = hard edge between colors, 1 = smooth gradient transition.
​
octaveCount
number
default:"1"
Number of noise octaves (1 to 8). More octaves create more detailed patterns but impact performance. Each octave adds a layer of detail.
​
persistence
number
default:"1"
Roughness and falloff between octaves (0.3 to 1). Lower values make higher octaves contribute less, creating smoother patterns. Higher values retain more detail.
​
lacunarity
number
default:"1.5"
Frequency step between octaves (1.5 to 10). Defines how compressed the pattern is. Higher values create more compressed, intricate patterns.
​
speed
number
default:"0.5"
Animation speed multiplier. Controls how fast the noise evolves through the third dimension (time).

​
Common Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions.
​
scale
number
default:"1"
Overall zoom level (0.01 to 4). Affects the size of noise features.
​
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

<PerlinNoise
  colorFront="#fccff7"
  colorBack="#632ad5"
  proportion={0.35}
  softness={0.1}
  octaveCount={1}
  persistence={1}
  lacunarity={1.5}
  speed={0.5}
/>

​
Nintendo Water

<PerlinNoise
  colorFront="#d1eefc"
  colorBack="#2d69d4"
  proportion={0.42}
  softness={0}
  octaveCount={2}
  persistence={0.55}
  lacunarity={1.8}
  scale={1 / 0.2}
  speed={0.4}
/>

​
Moss

<PerlinNoise
  colorFront="#262626"
  colorBack="#05ff4a"
  proportion={0.65}
  softness={0.35}
  octaveCount={6}
  persistence={1}
  lacunarity={2.55}
  scale={1 / 0.15}
  speed={0.02}
/>

​
Worms

<PerlinNoise
  colorFront="#595959"
  colorBack="#ffffff00"
  proportion={0.5}
  softness={0}
  octaveCount={1}
  persistence={1}
  lacunarity={1.5}
  scale={0.9}
  speed={0}
/>

​
Technical Details

  • Algorithm: Classic 3D Perlin noise with gradient interpolation
  • Gradients: 12 predefined gradient vectors for consistent results
  • Interpolation: Fade function using 6t⁵ - 15t⁴ + 10t³
  • Octaves: Fractal Brownian Motion (FBM) with configurable layers
  • Coordinates: Uses pattern UV coordinates scaled by 0.5
  • Anti-aliasing: Uses fwidth for smooth color transitions
  • Original Algorithm: Based on NlSGDz shader
The shader generates 3D Perlin noise by:
  1. Computing gradient vectors at the corners of a 3D grid cell
  2. Interpolating using the fade function for smooth transitions
  3. Optionally layering multiple octaves with decreasing amplitude and increasing frequency
  4. Normalizing the result and mapping to two colors with configurable sharpness