Chrome & liquid metal — a mirror with opinions

Metal has almost no colour of its own: it shows you the world around it. So we fake a world — sky, a bright strip, a hard dark horizon, warm ground — and every pixel of the ball bounces the camera ray off its surface and asks that world "what do I reflect?" Hard steps between bands are what read as polished; a travelling bright band on top reads as glint; wobbling the rim turns the whole thing liquid.

const S = 120;         // coarse grid, scaled up (same trick as the dissolve demo)
let LIQUID = 0.5;      // 0 = rigid chrome ball · 1 = molten blob
let TILT   = 0.10;     // how far the reflections slowly swim

// The fake world the metal reflects, top to bottom.
// Hard steps = polished chrome. Soften them = brushed / satin metal.
function world(v) {    // v: 0 = sky overhead … 1 = ground below
  if (v < 0.42) return [186, 220, 252];  // sky
  if (v < 0.50) return [252, 253, 255];  // bright strip above the horizon
  if (v < 0.56) return [62, 48, 46];     // the dark "horizon snap"
  if (v < 0.72) return [196, 172, 148];  // warm ground bounce
  return [30, 26, 40];                   // deep ground
}

const cell = Math.min(W, H) / S;
const ox = (W - S * cell) / 2, oy = (H - S * cell) / 2;
const R = S * 0.40;

onFrame((dt, t) => {
  ctx.fillStyle = "#14111F";
  ctx.fillRect(0, 0, W, H);
  const tilt  = TILT * Math.sin(t * 0.5);   // the world gently rocks
  const sweep = (t * 0.45) % 2 - 0.6;       // travelling glint position
  for (let gy = 0; gy < S; gy++) {
    for (let gx = 0; gx < S; gx++) {
      const dx = (gx - S / 2) / R, dy = (gy - S / 2) / R;
      // liquid: the rim breathes with two slow waves
      const ang = Math.atan2(dy, dx);
      const wob = 1 + LIQUID * (0.09 * Math.sin(3 * ang + t * 1.8)
                              + 0.06 * Math.sin(5 * ang - t * 1.3));
      const d = Math.hypot(dx, dy) / wob;
      if (d > 1) continue;                  // outside the blob
      // the surface normal of a ball at this pixel
      const nx = dx / wob, ny = dy / wob;
      const nz = Math.sqrt(Math.max(0, 1 - d * d));
      // ---- the entire secret of chrome ----
      const ry = 2 * nz * ny;               // camera ray bounced off the normal
      let v = 0.5 + ry * 0.5 + tilt;        // → where it lands in the world
      v = Math.min(1, Math.max(0, v));
      let [r, g, b] = world(v);
      // -------------------------------------
      // travelling glint: a bright diagonal band sweeping past every ~4 s
      const s = (nx + ny) * 0.5;
      const glint = Math.max(0, 1 - Math.abs(s - sweep) * 9);
      const add = glint * glint * 230;
      r = Math.min(255, r + add);
      g = Math.min(255, g + add);
      b = Math.min(255, b + add);
      ctx.fillStyle = "rgb(" + (r | 0) + "," + (g | 0) + "," + (b | 0) + ")";
      ctx.fillRect(ox + gx * cell, oy + gy * cell, cell + 0.5, cell + 0.5);
    }
  }
});

Watch the horizon band bend around the ball — that bending is what your eye calls "chrome." The lookup-by-normal trick here is exactly what 3D artists call a matcap (material capture), and the striped fake world is a one-dimensional environment map.

Try tweaking: LIQUID 0.5 → 0 (rigid ball) → 1 (molten) · warm every band's red channel up for gold, e.g. [252,253,255] → [255,240,180] · move the horizon from 0.50 to 0.65 · glint speed t * 0.45 → t * 1.5 (nervous sparkle) · widen the glint by lowering the * 9.

In pixel art: the same idea drawn by hand — a dark–light–dark band ramp across the form, then a 3–5 frame glint sweep where only the bright band moves. In Godot: the 2D matcap port of this exact demo is metal_chrome.gd, ready to download — scanlines reading a striped fake world; in 3D, StandardMaterial3D with metallic 1, roughness near 0 — plus a sky or ReflectionProbe, because a mirror with nothing to reflect is black. In Unity: metallic-smoothness + Reflection Probes. In Unreal: Metallic 1, low Roughness; reflection captures are placed for you in most templates. In three.js / Babylon: metalness: 1, roughness: 0 + an environment texture. Chapter 06 has the full metal entry.