iOS/Stripe-like Dynamic Gradient for Webflow with Three.js

<div id="waves3d"></div>

const container = document.getElementById('waves3d');
const params = {
  "amp": __AMP__,
  "freq": __FREQ__,
  "speed": __SPEED__,
  "topColor": "__TOP__",
  "bottomColor": "__BOT__",
  "opacity": __OPACITY__,
  "baseSize": __SIZE__,
  "segments": __SEGS__
};

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 5.5, 8);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({ antialias:false, alpha:true });
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setPixelRatio(Math.min(window.devicePixelRatio||1, 2));
container.appendChild(renderer.domElement);

function resize(){
  const w = container.clientWidth || innerWidth;
  const h = container.clientHeight || innerHeight;
  renderer.setSize(w,h,false);
  camera.aspect = w/h; camera.updateProjectionMatrix();
}
addEventListener('resize', resize, {passive:true}); resize();

const g = new THREE.PlaneGeometry(params.baseSize, params.baseSize, params.segments, params.segments);
g.rotateX(-Math.PI/2);

const uniforms = {
  uTime:{value:0},
  uAmp:{value:params.amp},
  uFreq:{value:params.freq},
  uSpeed:{value:params.speed},
  uTopColor:{value:new THREE.Color(params.topColor)},
  uBottomColor:{value:new THREE.Color(params.bottomColor)},
  uOpacity:{value:params.opacity}
};

const mat = new THREE.ShaderMaterial({uniforms,vertexShader:vert,fragmentShader:frag,transparent:true});
const mesh = new THREE.Mesh(g, mat);
scene.add(mesh);

function tick(t){
  uniforms.uTime.value = t*0.001*params.speed;
  renderer.setClearColor(0x000000,0);
  renderer.render(scene,camera);
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
</script>

Stripe-Like Gradient Three.js