Simplex Noise

Installation

npm i @paper-design/shaders-react

Code

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

<SimplexNoise
  style={{ height: 500 }}
  stepsPerColor={3}
  softness={0}
  scale={1}
  rotation={0}
  speed={0.5}
  colors={[
    "hsl(238, 59%, 54%)",
    "hsl(340, 100%, 91%)",
    "hsl(359, 94%, 62%)",
    "hsl(42, 100%, 71%)",
    "hsl(0, 0%, 100%)"
  ]}
/>

Props

colors

Colors used for the effect.

stepsPerColor

Discrete color steps between colors.

softness

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

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

Color gradient mapped over a combination of 2 simplex noises.