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.

Classic animated 3D Perlin noise rendered as a two-color pattern. The noise is built from multiple octaves of gradient noise sampled through a 3D volume, with the third dimension driven by time to produce smooth, organic animation. Proportion and softness controls let you dial the output from a hard binary mask to a fully blended gradient.

​
Usage

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

export default function Example() {
  return (
    <PerlinNoise
      colorBack="#632ad5"
      colorFront="#fccff7"
      proportion={0.35}
      softness={0.1}
      octaveCount={1}
      persistence={1}
      lacunarity={1.5}
      speed={0.5}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colorFront
string
default:"#fccff7"
Foreground color as a CSS color string.
​
colorBack
string
default:"#632ad5"
Background color as a CSS color string.
​
proportion
number
default:"0.35"
Blend point between the two colors. 0.5 gives equal distribution. Range: 0 to 1.
​
softness
number
default:"0.1"
Color transition sharpness. 0 = hard edge, 1 = smooth gradient. Range: 0 to 1.
​
octaveCount
number
default:"1"
Number of Perlin noise octaves. More octaves add finer detail. Range: 1 to 8.
​
persistence
number
default:"1"
Amplitude falloff between octaves (roughness). Range: 0.3 to 1.
​
lacunarity
number
default:"1.5"
Frequency multiplier between octaves. Higher values compress the pattern. Range: 1.5 to 10.
​
speed
number
default:"0.5"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Static frame position when speed is 0.

​
Presets

NameDescription
DefaultPurple-to-pink noise at low octave count
Nintendo WaterBlue animated water surface
MossDense, slow-moving organic coverage
WormsSingle-octave worm-like shapes

​
Sizing

This shader uses ShaderSizingParams. See Sizing and fit for fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, and worldHeight props.