Three.js Scroll Shader Ripple Distortion — GLSL ShaderMaterial Driven by Scroll

<section class="rpd-stage" id="rpdStage">
  <div class="rpd-intro-overlay"><p>Scroll ↓ to intensify the ripple</p></div>
  <canvas id="rpdCanvas"></canvas>
  <div class="rpd-hud"><span id="rpdPct">0</span>% intensity</div>
</section>
<section class="rpd-bottom"><p>A single ShaderMaterial plane, distorted entirely on the GPU.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#04030a;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.rpd-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#b9a8d6;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.rpd-stage{height:100vh;position:relative;overflow:hidden;background:#04030a}
.rpd-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:#e9defc;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 16px rgba(0,0,0,.6);transition:opacity .4s ease}
#rpdCanvas{display:block;width:100%;height:100%}
.rpd-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#e9d5ff;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('rpdCanvas');
const pctEl = document.getElementById('rpdPct');
const introEl = document.querySelector('.rpd-intro-overlay');

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

const scene = new THREE.Scene();
// An orthographic camera framing exactly [-1, 1] on both axes, paired with
// a 2x2 plane, is the simplest way to get a true full-viewport shader
// surface -- no perspective math or plane-size-to-camera-distance work.
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;',
  'uniform vec2 uResolution;',
  '',
  'void main() {',
  '  vec2 uv = vUv;',
  '  vec2 centered = uv - 0.5;',
  '  centered.x *= uResolution.x / uResolution.y;',
  '  float dist = length(centered);',
  '  vec2 dir = centered / (dist + 0.0001);',
  '',
  '  float freq = 10.0 + uProgress * 26.0;',
  '  float amp = 0.015 + uProgress * 0.09;',
  '  float ripple = sin(dist * freq - uTime * 1.6) * amp;',
  '  vec2 distortedUv = uv + dir * ripple;',
  '',
  '  vec3 colorA = vec3(0.05, 0.02, 0.16);',
  '  vec3 colorB = vec3(0.42, 0.08, 0.55);',
  '  vec3 colorC = vec3(0.95, 0.55, 0.85);',
  '  float mixVal = clamp(distortedUv.y + ripple * 1.5, 0.0, 1.0);',
  '  vec3 color = mix(colorA, colorB, smoothstep(0.0, 0.65, mixVal));',
  '  color = mix(color, colorC, smoothstep(0.55, 1.0, mixVal));',
  '',
  '  float rings = sin(dist * freq - uTime * 1.6);',
  '  float glow = smoothstep(0.985, 1.0, abs(rings)) * uProgress * 0.6;',
  '  color += glow * vec3(1.0, 0.9, 1.0);',
  '',
  '  float vignette = smoothstep(0.95, 0.25, dist);',
  '  color *= vignette;',
  '',
  '  gl_FragColor = vec4(color, 1.0);',
  '}',
].join('\n');

const uniforms = {
  uProgress: { value: 0 },
  uTime: { value: 0 },
  uResolution: { value: new THREE.Vector2(1, 1) },
};

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: '#rpdStage',
    start: 'top top',
    end: '+=350%',
    scrub: 0.6,
    pin: true,
  },
});

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

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();