Perlin Noise

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

function App() {
  return (
    <PerlinNoise
      colorFront="#fccff7"
      colorBack="#632ad5"
      proportion={0.35}
      softness={0.1}
      octaveCount={1}
      persistence={1}
      lacunarity={1.5}
      speed={0.5}
    />
  );
}

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

const container = document.getElementById('container');
const shader = new ShaderMount(
  container,
  perlinNoiseFragmentShader,
  {
    u_colorFront: [0.99, 0.81, 0.97, 1],
    u_colorBack: [0.39, 0.16, 0.84, 1],
    u_proportion: 0.35,
    u_softness: 0.1,
    u_octaveCount: 1,
    u_persistence: 1,
    u_lacunarity: 1.5,
    // Sizing uniforms
    u_fit: 2,
    u_scale: 1,
    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
);