Grain Gradient

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

function App() {
  return (
    <GrainGradient
      colorBack="#000000"
      colors={['#7300ff', '#eba8ff', '#00bfff', '#2a00ff']}
      shape="corners"
      softness={0.5}
      intensity={0.5}
      noise={0.25}
      speed={1}
    />
  );
}

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

const container = document.getElementById('container');
const shader = new ShaderMount(
  container,
  grainGradientFragmentShader,
  {
    u_colorBack: [0, 0, 0, 1],
    u_colors: [
      [0.45, 0, 1, 1],
      [0.92, 0.66, 1, 1],
      [0, 0.75, 1, 1],
      [0.16, 0, 1, 1]
    ],
    u_colorsCount: 4,
    u_shape: GrainGradientShapes.corners, // 4
    u_softness: 0.5,
    u_intensity: 0.5,
    u_noise: 0.25,
    u_noiseTexture: noiseTextureImage,
    // 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
  1   // speed
);