Mesh Gradient

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

function App() {
  return (
    <MeshGradient
      colors={['#e0eaff', '#241d9a', '#f75092', '#9f50d3']}
      speed={1}
      distortion={0.8}
      swirl={0.1}
      grainMixer={0}
      grainOverlay={0}
    />
  );
}

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

const container = document.getElementById('container');
const shader = new ShaderMount(
  container,
  meshGradientFragmentShader,
  {
    u_colors: [
      [0.88, 0.92, 1, 1],
      [0.14, 0.11, 0.6, 1],
      [0.97, 0.31, 0.57, 1],
      [0.62, 0.31, 0.83, 1]
    ],
    u_colorsCount: 4,
    u_distortion: 0.8,
    u_swirl: 0.1,
    u_grainMixer: 0,
    u_grainOverlay: 0,
    // Sizing uniforms
    u_fit: 2, // 0=none, 1=contain, 2=cover
    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
);