perlin noise

Classic animated 3D Perlin noise with all the canonical controls — octave count, persistence, and lacunarity. From single-layer drift to multi-octave clouds.

Preview

live

Install

npm

npm i @devmischief/shaders-svelte

Code

import { PerlinNoise } from '@devmischief/shaders-svelte';

<PerlinNoise
  width={1280}
  height={720}
  colorBack="#632ad5"
  colorFront="#fccff7"
  proportion={0.35}
  softness={0.1}
  octaveCount={1}
  persistence={1}
  lacunarity={1.5}
  scale={1}
  rotation={0}
  offsetX={0}
  offsetY={0}
  speed={0.5}
  fit="none"
/>

Shader Props

name	description	type	values
colorBack	Background color of the noise field.	string	hex / rgba
colorFront	Foreground color of the noise field.	string	hex / rgb
proportion	Blend point between front and back colors. 0.5 = equal distribution.	number	0 → 1
softness	Color transition sharpness. 0 = hard edge, 1 = smooth gradient.	number	0 → 1
octaveCount	Number of noise octaves stacked. More octaves = more detail.	number	1 → 8
persistence	Roughness — how much each octave contributes.	number	0.3 → 1
lacunarity	Frequency step between octaves — how compressed each octave is.	number	1.5 → 10
speed	Animation speed of the drifting noise.	number	0 → 3
fit	How the noise field is fit into the canvas.	string	none · cover · contain

Common Props

name	description	type	values
originX	Reference point for positioning width in the canvas.	number	0 → 1
originY	Reference point for positioning height in the canvas.	number	0 → 1
worldWidth	Virtual width of the graphic before it's scaled to fit the canvas.	number	—
worldHeight	Virtual height of the graphic before it's scaled to fit the canvas.	number	—
minPixelRatio	Minimum pixel ratio used when rendering the shader (default 2).	number	—
maxPixelCount	Maximum pixel count the shader may process.	number	—