Static Mesh Gradient

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

function App() {
  return (
    <StaticMeshGradient
      colors={['#ffad0a', '#6200ff', '#e2a3ff', '#ff99fd']}
      positions={2}
      waveX={1.0}
      waveXShift={0.6}
      waveY={1.0}
      waveYShift={0.21}
      mixing={0.93}
      rotation={270}
    />
  );
}

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

const container = document.getElementById('container');
const shader = new ShaderMount(
  container,
  staticMeshGradientFragmentShader,
  {
    u_colors: [
      [1, 0.68, 0.04, 1],
      [0.38, 0, 1, 1],
      [0.89, 0.64, 1, 1],
      [1, 0.6, 0.99, 1]
    ],
    u_colorsCount: 4,
    u_positions: 2,
    u_waveX: 1.0,
    u_waveXShift: 0.6,
    u_waveY: 1.0,
    u_waveYShift: 0.21,
    u_mixing: 0.93,
    u_grainMixer: 0,
    u_grainOverlay: 0,
    // Sizing uniforms
    u_fit: 2,
    u_scale: 1,
    u_rotation: 270,
    u_offsetX: 0,
    u_offsetY: 0,
    u_originX: 0.5,
    u_originY: 0.5,
    u_worldWidth: 0,
    u_worldHeight: 0,
  },
  {}, // WebGL context attributes
  0   // speed
);