noise-wave-flow

Vanilla JS

import { mountNoiseFlow } from '@elysian256/noise-wave-flow';

// Creates and injects a <canvas> automatically
const flow = mountNoiseFlow(document.getElementById('hero'), {
  color: '255,255,255',
  alpha: 0.14,
});

flow.update({ alpha: 0.06 }); // live-patch without restart
flow.destroy();               // stop and remove canvas

React

import { useNoiseFlow } from '@elysian256/noise-wave-flow/react';

function Hero() {
  const { canvasRef, containerRef } = useNoiseFlow({
    color: '255,255,255',
    alpha: 0.14,
  });

  return (
    <section ref={containerRef} style={{ position: 'relative' }}>
      <canvas ref={canvasRef} style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%', pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        {/* your content */}
      </div>
    </section>
  );
}

Config reference