Simplex Noise

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

function App() {
  return (
    <SimplexNoise
      colors={['#4449CF', '#FFD1E0', '#F94446', '#FFD36B', '#FFFFFF']}
      stepsPerColor={2}
      softness={0}
      scale={0.6}
      speed={0.5}
    />
  );
}

import { ShaderMount, simplexNoiseFragmentShader } from '@paper-design/shaders';

const container = document.getElementById('container');
const shader = new ShaderMount(
  container,
  simplexNoiseFragmentShader,
  {
    u_colors: [
      [0.27, 0.29, 0.81, 1],
      [1, 0.82, 0.88, 1],
      [0.98, 0.27, 0.27, 1],
      [1, 0.84, 0.42, 1],
      [1, 1, 1, 1]
    ],
    u_colorsCount: 5,
    u_stepsPerColor: 2,
    u_softness: 0,
    // Sizing uniforms
    u_fit: 2,
    u_scale: 0.6,
    u_rotation: 0,
    u_offsetX: 0,
    u_offsetY: 0,
    u_originX: 0.5,
    u_originY: 0.5,
    u_worldWidth: 0,
    u_worldHeight: 0,
  },
  {}, // WebGL context attributes
  0.5 // speed
);