Three.js Scroll Shader Fluid Gradient Wave — GLSL ShaderMaterial Driven by Scroll

<section class="fgw-stage" id="fgwStage">
  <div class="fgw-intro-overlay"><p>Scroll ↓ to stir the gradient</p></div>
  <canvas id="fgwCanvas"></canvas>
  <div class="fgw-hud"><span id="fgwPct">0</span>% amplitude</div>
</section>
<section class="fgw-bottom"><p>A single ShaderMaterial plane, waving entirely on the GPU.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#040308;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.fgw-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#a8b3d6;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.fgw-stage{height:100vh;position:relative;overflow:hidden;background:#040308}
.fgw-intro-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#eef0ff;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 16px rgba(0,0,0,.6);transition:opacity .4s ease}
#fgwCanvas{display:block;width:100%;height:100%}
.fgw-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#c7d2ff;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('fgwCanvas');
const pctEl = document.getElementById('fgwPct');
const introEl = document.querySelector('.fgw-intro-overlay');

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

const vertexShader = [
  'varying vec2 vUv;',
  'void main() {',
  '  vUv = uv;',
  '  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
  '}',
].join('\n');

const fragmentShader = [
  'precision highp float;',
  'varying vec2 vUv;',
  'uniform float uProgress;',
  'uniform float uTime;',
  '',
  'void main() {',
  '  vec2 uv = vUv;',
  '',
  '  float speed = 0.35 + uProgress * 0.9;',
  '  float amp = 0.06 + uProgress * 0.16;',
  '',
  '  float wave1 = sin(uv.x * 6.0 + uTime * speed) * amp;',
  '  float wave2 = sin((uv.x * 3.0 - uv.y * 2.0) * 4.0 + uTime * speed * 1.4) * amp * 0.6;',
  '  float wave3 = cos(uv.y * 5.0 - uTime * speed * 0.7) * amp * 0.4;',
  '',
  '  float band = uv.y + wave1 + wave2 + wave3;',
  '',
  '  vec3 colorA = vec3(0.04, 0.07, 0.20);',
  '  vec3 colorB = vec3(0.10, 0.45, 0.62);',
  '  vec3 colorC = vec3(0.85, 0.42, 0.66);',
  '',
  '  float hueShift = uProgress * 0.35;',
  '  vec3 shiftedB = mix(colorB, vec3(0.55, 0.22, 0.78), hueShift);',
  '  vec3 shiftedC = mix(colorC, vec3(0.98, 0.75, 0.35), hueShift);',
  '',
  '  vec3 color = mix(colorA, shiftedB, smoothstep(0.15, 0.55, band));',
  '  color = mix(color, shiftedC, smoothstep(0.55, 0.95, band));',
  '',
  '  float sheen = smoothstep(0.48, 0.5, band) * (1.0 - smoothstep(0.5, 0.52, band));',
  '  color += sheen * 0.5;',
  '',
  '  gl_FragColor = vec4(color, 1.0);',
  '}',
].join('\n');

const uniforms = {
  uProgress: { value: 0 },
  uTime: { value: 0 },
};

const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  uniforms,
});

const geometry = new THREE.PlaneGeometry(2, 2);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

gsap.registerPlugin(ScrollTrigger);
const progress = { t: 0 };
gsap.to(progress, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#fgwStage',
    start: 'top top',
    end: '+=350%',
    scrub: 0.6,
    pin: true,
  },
});

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
}

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  if (introEl) introEl.style.opacity = (progress.t > 0.03) ? '0' : '1';

  uniforms.uProgress.value = progress.t;
  uniforms.uTime.value = clock.getElapsedTime();

  pctEl.textContent = Math.round(progress.t * 100);
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();