Three.js Scroll Wave Terrain — GSAP Synthwave Grid

<section class="wtr-top"><p>Scroll ↓ to raise the landscape</p></section>
<section class="wtr-stage" id="wtrStage">
  <canvas id="wtrCanvas"></canvas>
</section>
<section class="wtr-bottom"><p>The horizon settles.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#060512;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.wtr-top,.wtr-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#8079a8;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.wtr-stage{height:100vh;position:relative;overflow:hidden;background:linear-gradient(180deg,#1a1140 0%,#3a1a52 42%,#060512 100%)}
#wtrCanvas{display:block;width:100%;height:100%}

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

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x1a1140, 8, 34);
const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 100);
camera.position.set(0, 3.2, 9);
camera.lookAt(0, 0, -6);

// A flat plane laid out on the ground. Its vertices' original X/Z are kept so
// the height field can be recomputed each frame; scroll controls the wave
// amplitude, so the ground rises from perfectly flat into rolling hills.
const SEG = 80;
const geo = new THREE.PlaneGeometry(40, 40, SEG, SEG);
geo.rotateX(-Math.PI / 2);
const base = geo.attributes.position.array.slice();

const mat = new THREE.MeshBasicMaterial({ color: 0xf472b6, wireframe: true, transparent: true, opacity: 0.65 });
const terrain = new THREE.Mesh(geo, mat);
scene.add(terrain);

// A neon sun disc sitting on the horizon for a synthwave backdrop.
const sun = new THREE.Mesh(
  new THREE.CircleGeometry(6, 48),
  new THREE.MeshBasicMaterial({ color: 0xfbbf24 })
);
sun.position.set(0, 4, -24);
scene.add(sun);

gsap.registerPlugin(ScrollTrigger);

// 'amp' is the wave amplitude driven by scroll; 'flow' scrolls the pattern
// forward over real time so the hills always drift toward the camera.
const state = { amp: 0 };
gsap.to(state, {
  amp: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#wtrStage',
    start: 'top top',
    end: '+=400%',
    scrub: 0.5,
    pin: true,
  },
});

const pos = geo.attributes.position;
function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

function animate() {
  requestAnimationFrame(animate);
  const t = performance.now() * 0.0005;
  const amp = state.amp;
  const arr = pos.array;
  for (let i = 0; i < arr.length; i += 3) {
    const x = base[i], z = base[i + 2];
    // Two overlaid sine waves make organic-looking rolling hills; both are
    // scaled by the scroll-driven amplitude and animated forward via 't'.
    const h1 = Math.sin(x * 0.35 + t * 2) * 0.7;
    const h2 = Math.cos(z * 0.5 + x * 0.2 + t * 1.4) * 0.9;
    arr[i + 1] = (h1 + h2) * amp;
  }
  pos.needsUpdate = true;

  // As the terrain rises, ease the camera lower so hills fill more of the view.
  camera.position.y = 3.2 - amp * 1.4;
  camera.lookAt(0, amp * 0.6, -6);

  renderer.render(scene, camera);
}

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