Shaders

Perlin Noise

Installation

npm i @paper-design/shaders-react

Code

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

<PerlinNoise
  style={{ height: 500 }}
  colorBack="hsl(260, 67%, 50%)"
  colorFront="hsl(307, 88%, 90%)"
  proportion={0.35}
  softness={0.1}
  octaveCount={1}
  persistence={1}
  lacunarity={1.5}
  scale={1}
  rotation={0}
  speed={0.5}
/>

Props

colorBack, colorFront

Colors used for the effect.

proportion

Blend point between 2 colors (0.5 = equal distribution).

softness

Color transition sharpness (0 = hard edge, 1 = smooth fade).

octaveCount

More octaves give more detailed patterns.

persistence

Roughness, falloff between octaves.

lacunarity

Frequency step, typically around 2. Defines how compressed the pattern is.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

3D Perlin noise.