Three.js Scroll Color Morph — GSAP Distortion Blob on Scroll

<section class="cmb-top"><p>Scroll ↓ to morph the shape</p></section>
<section class="cmb-stage" id="cmbStage">
  <canvas id="cmbCanvas"></canvas>
</section>
<section class="cmb-bottom"><p>Form and colour, settled.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#06060c;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.cmb-top,.cmb-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#7a7594;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.cmb-stage{height:100vh;position:relative;overflow:hidden;background:#06060c;transition:background .2s linear}
#cmbCanvas{display:block;width:100%;height:100%}

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

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 100);
camera.position.set(0, 0, 5);

scene.add(new THREE.AmbientLight(0x404060, 0.8));
const key = new THREE.PointLight(0xffffff, 1.6, 40); key.position.set(4, 5, 6); scene.add(key);

// A high-detail icosahedron whose vertices are pushed along their normals by
// layered 3D noise. Scroll controls how strong and how spiky that distortion
// is, and shifts the colour through a hue sweep — a "morphing blob".
const geo = new THREE.IcosahedronGeometry(1.4, 48);
const base = geo.attributes.position.array.slice();
const normals = geo.attributes.normal.array.slice();

const mat = new THREE.MeshStandardMaterial({ color: 0x60a5fa, metalness: 0.35, roughness: 0.25, flatShading: false });
const blob = new THREE.Mesh(geo, mat);
scene.add(blob);

// Cheap pseudo-3D noise from summed sines — no noise library needed.
function noise(x, y, z, t) {
  return (
    Math.sin(x * 1.5 + t) * 0.5 +
    Math.sin(y * 2.1 + t * 1.3) * 0.35 +
    Math.sin(z * 1.8 + x * 0.6 + t * 0.7) * 0.4
  );
}

gsap.registerPlugin(ScrollTrigger);

// 'm' is the morph amount driven by scroll: 0 = smooth sphere, 1 = spiky,
// churning blob. Hue and background also track 'm'.
const state = { m: 0 };
gsap.to(state, {
  m: 1, ease: 'none',
  scrollTrigger: {
    trigger: '#cmbStage', start: 'top top', end: '+=420%', scrub: 0.6, 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.0006;
  const m = state.m;
  const arr = pos.array;
  for (let i = 0; i < arr.length; i += 3) {
    const bx = base[i], by = base[i + 1], bz = base[i + 2];
    const nx = normals[i], ny = normals[i + 1], nz = normals[i + 2];
    // Displace each vertex along its own normal; amount scales with morph 'm'.
    const d = noise(bx, by, bz, t) * m * 0.55;
    arr[i]     = bx + nx * d;
    arr[i + 1] = by + ny * d;
    arr[i + 2] = bz + nz * d;
  }
  pos.needsUpdate = true;
  geo.computeVertexNormals(); // relight the churning surface each frame

  // Colour and background track the same morph value.
  const hue = (0.58 + m * 0.42) % 1;
  mat.color.setHSL(hue, 0.7, 0.6);
  mat.emissive.setHSL(hue, 0.7, 0.15 + m * 0.1);
  const bg = new THREE.Color().setHSL(hue, 0.5, 0.05 + m * 0.04);
  stage.style.background = '#' + bg.getHexString();

  blob.rotation.y += 0.003;
  blob.rotation.x += 0.001;
  renderer.render(scene, camera);
}

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