Liquid Metal Shader

<div class="ps-canvas-wrap">
  <canvas class="ps-canvas" id="psLiquidMetal" width="393" height="280" style="width: 392.672px; height: 280px;">
  </canvas>
</div>

.ps-canvas  {
   width: 100%;
   height: 280px;
   display: block;
   border-radius: 0px;
   }

.ps-canvas-wrap  {
   position: relative;
   width: 100%;
   height: 280px;
   }

.ps-canvas-wrap canvas  {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   }

var c=document.createElement('div');

var b=document.querySelector('.nav-theme-toggle');

const canvas = document.getElementById('psStarfield');

(function() {
  var settings = { color: 'silver', speed: 1.0, distortion: 0.6, lightAngle: 45 };
  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function initMetal(canvas) {
  // Reduced motion : fallback CSS gradient déjà en place via @media
  if (reduceMotion) return;

  const gl = canvas.getContext('webgl', { antialias: false, alpha: false }) ||
             canvas.getContext('experimental-webgl');

  // WebGL not supported → CSS gradient fallback (handled in CSS @media query)
  if (!gl) {
    canvas.style.display = 'none';
    return;
  }

  // === Vertex shader : fullscreen quad ===
  const VS = `
    attribute vec2 a_pos;
    void main() { gl_Position = vec4(a_pos, 0.0, 1.0); }
  `;

  // === Fragment shader : liquid metal via Perlin noise + raymarching simplifié ===
  const FS = `
    precision highp float;
    uniform vec2  u_res;
    uniform float u_time;
    uniform float u_speed;
    uniform float u_distortion;
    uniform float u_light_angle;
    uniform vec3  u_color_a;
    uniform vec3  u_color_b;
    uniform vec3  u_color_c;

    // Classic 2D simplex noise (Ashima Arts, MIT)
    vec3 mod289(vec3 x) { return x - floor(x * (1.0/289.0)) * 289.0; }
    vec2 mod289(vec2 x) { return x - floor(x * (1.0/289.0)) * 289.0; }
    vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }

    float snoise(vec2 v){
      const vec4 C = vec4(0.211324865405187, 0.366025403784439,
                         -0.577350269189626, 0.024390243902439);
      vec2 i  = floor(v + dot(v, C.yy));
      vec2 x0 = v - i + dot(i, C.xx);
      vec2 i1 = (x0.x > x0.y) ? vec2(1.0,0.0) : vec2(0.0,1.0);
      vec4 x12 = x0.xyxy + C.xxzz;
      x12.xy -= i1;
      i = mod289(i);
      vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0))
                              + i.x + vec3(0.0, i1.x, 1.0));
      vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
      m = m*m; m = m*m;
      vec3 x = 2.0 * fract(p * C.www) - 1.0;
      vec3 h = abs(x) - 0.5;
      vec3 ox = floor(x + 0.5);
      vec3 a0 = x - ox;
      m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
      vec3 g;
      g.x  = a0.x  * x0.x  + h.x  * x0.y;
      g.yz = a0.yz * x12.xz + h.yz * x12.yw;
      return 130.0 * dot(m, g);
    }

    // Octave fbm for richer surface
    float fbm(vec2 p) {
      float v = 0.0;
      float a = 0.5;
      for (int i = 0; i < 4; i++) {
        v += a * snoise(p);
        p *= 2.0;
        a *= 0.5;
      }
      return v;
    }

    void main() {
      vec2 uv = (gl_FragCoord.xy - 0.5 * u_res) / min(u_res.x, u_res.y);
      float t = u_time * u_speed * 0.3;

      // Surface height via fbm
      float h = fbm(uv * 2.0 + vec2(t, t * 0.7)) * u_distortion;

      // Surface normal via gradient (finite differences)
      float eps = 0.01;
      float hx = fbm((uv + vec2(eps,0.0)) * 2.0 + vec2(t, t*0.7)) * u_distortion;
      float hy = fbm((uv + vec2(0.0,eps)) * 2.0 + vec2(t, t*0.7)) * u_distortion;
      vec3 normal = normalize(vec3((h - hx)/eps, (h - hy)/eps, 1.0));

      // Light direction
      float angle = radians(u_light_angle);
      vec3 lightDir = normalize(vec3(cos(angle), sin(angle), 0.6));

      // Specular metal reflection
      float diffuse = max(dot(normal, lightDir), 0.0);
      vec3 viewDir = vec3(0.0, 0.0, 1.0);
      vec3 reflectDir = reflect(-lightDir, normal);
      float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);

      // Iridescence factor (used by gold/iridescent presets)
      float irid = 0.5 + 0.5 * sin(h * 8.0 + t * 2.0);

      // Mix three colour stops based on diffuse + iridescence
      vec3 base = mix(u_color_a, u_color_b, diffuse);
      base = mix(base, u_color_c, irid * 0.5);

      // Metal gloss : add specular highlight
      vec3 finalColor = base + vec3(spec * 1.2);

      // Vignette subtle
      float vig = 1.0 - 0.4 * length(uv);
      finalColor *= vig;

      gl_FragColor = vec4(finalColor, 1.0);
    }
  `;

  // === Compile + link program ===
  function compile(type, src) {
    const sh = gl.createShader(type);
    gl.shaderSource(sh, src);
    gl.compileShader(sh);
    if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
      console.error('Shader compile error:', gl.getShaderInfoLog(sh));
      gl.deleteShader(sh);
      return null;
    }
    return sh;
  }

  const vs = compile(gl.VERTEX_SHADER, VS);
  const fs = compile(gl.FRAGMENT_SHADER, FS);
  if (!vs || !fs) return;

  const prog = gl.createProgram();
  gl.attachShader(prog, vs);
  gl.attachShader(prog, fs);
  gl.linkProgram(prog);
  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
    console.error('Program link error:', gl.getProgramInfoLog(prog));
    return;
  }
  gl.useProgram(prog);

  // === Fullscreen quad ===
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
  const aPos = gl.getAttribLocation(prog, 'a_pos');
  gl.enableVertexAttribArray(aPos);
  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

  // === Uniforms ===
  const uRes = gl.getUniformLocation(prog, 'u_res');
  const uTime = gl.getUniformLocation(prog, 'u_time');
  const uSpeed = gl.getUniformLocation(prog, 'u_speed');
  const uDist = gl.getUniformLocation(prog, 'u_distortion');
  const uLight = gl.getUniformLocation(prog, 'u_light_angle');
  const uColA = gl.getUniformLocation(prog, 'u_color_a');
  const uColB = gl.getUniformLocation(prog, 'u_color_b');
  const uColC = gl.getUniformLocation(prog, 'u_color_c');

  // === Color presets ===
  const PALETTES = {
    silver:     { a: [0.10, 0.11, 0.13], b: [0.85, 0.88, 0.92], c: [0.55, 0.60, 0.70] },
    gold:       { a: [0.20, 0.13, 0.05], b: [0.95, 0.78, 0.30], c: [0.70, 0.45, 0.15] },
    iridescent: { a: [0.10, 0.05, 0.20], b: [0.30, 0.85, 0.95], c: [0.95, 0.40, 0.85] }
  };

  function syncCanvasSize() {
    const rect = canvas.parentElement.getBoundingClientRect();
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    canvas.width = Math.round(rect.width * dpr);
    canvas.height = Math.round(rect.height * dpr);
    canvas.style.width = rect.width + 'px';
    canvas.style.height = rect.height + 'px';
    gl.viewport(0, 0, canvas.width, canvas.height);
  }
  syncCanvasSize();
  window.addEventListener('resize', syncCanvasSize);

  // === Pause when offscreen (perf) ===
  let visible = true;
  if ('IntersectionObserver' in window) {
    new IntersectionObserver((entries) => {
      entries.forEach(e => visible = e.isIntersecting);
    }, { threshold: 0.01 }).observe(canvas);
  }

  // === Render loop ===
  const start = performance.now();
  function render() {
    if (visible) {
      const t = (performance.now() - start) / 1000;
      const pal = PALETTES[settings.color] || PALETTES.silver;
      gl.uniform2f(uRes, canvas.width, canvas.height);
      gl.uniform1f(uTime, t);
      gl.uniform1f(uSpeed, settings.speed);
      gl.uniform1f(uDist, settings.distortion);
      gl.uniform1f(uLight, settings.lightAngle);
      gl.uniform3fv(uColA, pal.a);
      gl.uniform3fv(uColB, pal.b);
      gl.uniform3fv(uColC, pal.c);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    }
    requestAnimationFrame(render);
  }
  render();
  } // fin initMetal

  var el = document.getElementById('psLiquidMetal');
  if (el) initMetal(el);
})();