Waves

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

export default function MyComponent() {
  return (
    <Waves
      colorFront="#ffbb00"
      colorBack="#000000"
      shape={0}
      frequency={0.5}
      amplitude={0.5}
      spacing={1.2}
      proportion={0.1}
      softness={0}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountWaves(canvas, {
  colorFront: '#ffbb00',
  colorBack: '#000000',
  shape: 0,
  frequency: 0.5,
  amplitude: 0.5,
  spacing: 1.2,
  proportion: 0.1,
  softness: 0,
});

// Call cleanup() when done

import { Waves, groovyPreset } from '@paper-design/shaders-react';

<Waves {...groovyPreset.params} />