Metaballs

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

function App() {
  return (
    <Metaballs
      colorBack="#000000"
      colors={['#6e33cc', '#ff5500', '#ffc105', '#ffc800', '#f585ff']}
      count={10}
      size={0.83}
      speed={1}
    />
  );
}

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

const container = document.getElementById('container');
const shader = new ShaderMount(
  container,
  metaballsFragmentShader,
  {
    u_colorBack: [0, 0, 0, 1],
    u_colors: [
      [0.43, 0.2, 0.8, 1],
      [1, 0.33, 0, 1],
      [1, 0.76, 0.02, 1],
      [1, 0.78, 0, 1],
      [0.96, 0.52, 1, 1]
    ],
    u_colorsCount: 5,
    u_count: 10,
    u_size: 0.83,
    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
);