Three.js Scroll Liquid Metal Blob — Chrome Noise Displacement

<section class="lqm-stage" id="lqmStage">
  <div class="lqm-intro-overlay"><p>Scroll ↓ to melt the sphere into rippling liquid metal</p></div>
  <canvas id="lqmCanvas"></canvas>
  <div class="lqm-hud"><span id="lqmPct">0</span>% molten</div>
</section>
<section class="lqm-bottom"><p>A fully rippling liquid-metal form.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#05070c;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.lqm-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#8fb0c9;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.lqm-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#0e1620 0%,#05070c 70%)}
.lqm-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:#8fb0c9;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
#lqmCanvas{display:block;width:100%;height:100%}
.lqm-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#bcd8f0;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('lqmCanvas');
const pctEl = document.getElementById('lqmPct');
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(48, 1, 0.1, 200);
camera.position.set(0, 0, 12);
camera.lookAt(0, 0, 0);

scene.add(new THREE.AmbientLight(0x203040, 0.6));
const l1 = new THREE.PointLight(0xbfe4ff, 2.2, 60);
l1.position.set(8, 8, 10);
scene.add(l1);
const l2 = new THREE.PointLight(0x6ea8ff, 1.6, 60);
l2.position.set(-9, -6, 6);
scene.add(l2);
const l3 = new THREE.PointLight(0xffffff, 1.2, 60);
l3.position.set(0, -10, 8);
scene.add(l3);

// Cheap 3D value-noise: a hash-based gradient noise substitute built entirely
// from sums of sines. Not a true Perlin/Simplex implementation, but smooth,
// deterministic, and fast enough to evaluate per-vertex every frame.
function noise3(x, y, z) {
  const n1 = Math.sin(x * 1.7 + z * 0.6) * Math.cos(y * 1.3 - z * 0.4);
  const n2 = Math.sin(x * 0.6 - y * 1.9 + z * 1.1) * 0.5;
  const n3 = Math.cos(x * 2.3 + y * 0.4 - z * 1.6) * 0.3;
  return n1 + n2 + n3;
}

const geometry = new THREE.IcosahedronGeometry(3.2, 4);
const posAttr = geometry.getAttribute('position');
const count = posAttr.count;
const basePos = new Float32Array(count * 3);
for (let i = 0; i < count; i++) {
  basePos[i * 3] = posAttr.getX(i);
  basePos[i * 3 + 1] = posAttr.getY(i);
  basePos[i * 3 + 2] = posAttr.getZ(i);
}

const material = new THREE.MeshStandardMaterial({
  color: 0xdfe8ee,
  metalness: 1,
  roughness: 0.16,
  envMapIntensity: 1.2,
});
const blob = new THREE.Mesh(geometry, material);
scene.add(blob);

const introEl = document.querySelector('.lqm-intro-overlay');
gsap.registerPlugin(ScrollTrigger);

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#lqmStage',
    start: 'top top',
    end: '+=450%',
    scrub: 0.6,
    pin: true,
  },
});

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

const nx = new THREE.Vector3();
let clock = 0;

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

  const t = form.t;
  const eased = t * t * (3 - 2 * t);
  clock += 0.006;

  // Displacement amplitude ramps with scroll progress so at t=0 the mesh is a
  // perfectly smooth sphere, and grows toward a rippling organic blob at t=1.
  const amp = eased * 1.15;
  const freq = 0.55 + eased * 0.35;

  for (let i = 0; i < count; i++) {
    const ix = i * 3;
    const bx = basePos[ix], by = basePos[ix + 1], bz = basePos[ix + 2];
    nx.set(bx, by, bz).normalize();
    const n = noise3(bx * freq + clock, by * freq - clock * 0.7, bz * freq + clock * 0.4);
    const displaced = 1 + n * amp * 0.22;
    posAttr.setXYZ(i, nx.x * (3.2 * displaced), nx.y * (3.2 * displaced), nx.z * (3.2 * displaced));
  }
  posAttr.needsUpdate = true;
  geometry.computeVertexNormals();

  blob.rotation.y += 0.0022 + eased * 0.003;
  blob.rotation.x = Math.sin(clock * 0.3) * 0.15 * eased;

  l1.intensity = 2.2 - eased * 0.4;
  l2.position.x = -9 + Math.sin(clock) * 2 * eased;

  const camDist = 12 - eased * 2.5;
  camera.position.set(0, 0, camDist);
  camera.lookAt(0, 0, 0);

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

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