simplex noise
A multi-colour gradient mapped onto a smooth, animated combination of two simplex noises. Pure palette and softness — no other knobs needed.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { SimplexNoise } from '@devmischief/shaders-svelte';
<SimplexNoise
width={1280}
height={720}
colors={['#3a86ff', '#06d6a0', '#ffd166', '#ef476f', '#8338ec']}
stepsPerColor={2}
softness={0}
scale={0.2}
rotation={0}
offsetX={0}
offsetY={0}
speed={2}
fit="none"
/>
Shader Props
5 | name | description | type | values |
|---|
| colors | Base palette colors (up to 10). | string[] | hex / rgb |
| stepsPerColor | Extra interpolated colors generated between each pair of base colors. 1 = N colors, 10 = 10×N. | number | 1 → 10 |
| softness | Color transition sharpness. 0 = hard edge, 1 = smooth gradient. | number | 0 → 1 |
| 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
6 | 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 | — |