Perlin Noise

Presets

Installation

npm i @paper-design/shaders-react

Code

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

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

Props

Name	Description	Type	Values
colorBack	Background color	`string`	Hex, RGB, or HSL color
colorFront	Foreground color	`string`	Hex, RGB, or HSL color
proportion	Blend point between 2 colors (0.5 = equal distribution)	`number`	0 to 1
softness	Color transition sharpness (0 = hard edge, 1 = smooth gradient)	`number`	0 to 1
octaveCount	Perlin noise octaves number (more octaves for more detailed patterns)	`number`	1 to 8 (integer)
persistence	Roughness, falloff between octaves	`number`	0.3 to 1
lacunarity	Frequency step, typically around 2. Defines how compressed the pattern is	`number`	1.5 to 10
width	CSS width style of the shader element	`number \| string`	—
height	CSS height style of the shader element	`number \| string`	—
scale	Overall zoom level of the graphics	`number`	0.01 to 4
rotation	Overall rotation angle of the graphics	`number`	0 to 360
speed	Animation speed	`number`	0 to 0.5

Description

Animated 3D Perlin noise with exposed controls.