Metaballs

<div class="fx-0391-root">
  <div class="metaballs-container">
    <canvas class="metaballs-canvas"></canvas>
  </div>
</div>

.fx-0391-root,
.fx-0391-root *,
.fx-0391-root *::before,
.fx-0391-root *::after {
  box-sizing: border-box
}

.fx-0391-root {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.metaballs-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.metaballs-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

(function() {
  // ============================================
  // METABALLS - Canvas 2D, champ calculé pixel par pixel
  // Réglages par bloc (facultatifs) sur .fx-0391-root :
  //   data-balls="3"            nombre de boules (6 par défaut)
  //   data-color="99,102,241"   couleur des boules en R,V,B (indigo par défaut)
  // ============================================
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)');

  document.querySelectorAll('.fx-0391-root').forEach(function(root) {
    var canvas = root.querySelector('.metaballs-canvas');
    if (!canvas) return;
    var ctx = canvas.getContext('2d');
    var container = canvas.parentElement;

    var numBalls = parseInt(root.getAttribute('data-balls'), 10) || 6;
    var color = (root.getAttribute('data-color') || '99,102,241').split(',').map(Number);
    var background = [26, 26, 36];
    var PIXEL_BUDGET = 650000;

    var w = 0, h = 0, scale = 1, imageData = null;
    var balls = [];
    var raf = 0, visible = true;

    function resize() {
      w = container.clientWidth;
      h = container.clientHeight;
      // Écran Retina : jusqu'à 2 pixels de canvas par pixel CSS, dans la limite de PIXEL_BUDGET pixels
      // calculés par image (le champ est calculé pixel par pixel : sur un grand cadre, la fluidité passe d'abord)
      scale = Math.max(1, Math.min(window.devicePixelRatio || 1, 2, Math.sqrt(PIXEL_BUDGET / Math.max(1, w * h))));
      canvas.width = Math.max(1, Math.round(w * scale));
      canvas.height = Math.max(1, Math.round(h * scale));
      imageData = ctx.createImageData(canvas.width, canvas.height);
      if (!balls.length) {
        for (var i = 0; i < numBalls; i++) {
          var radius = 30 + Math.random() * 40;
          balls.push({
            x: radius + Math.random() * Math.max(0, w - 2 * radius),
            y: radius + Math.random() * Math.max(0, h - 2 * radius),
            vx: (Math.random() - 0.5) * 2,
            vy: (Math.random() - 0.5) * 2,
            radius: radius
          });
        }
      }
      keepInside();
      drawMetaballs();
      start();
    }

    // Une boule ne sort jamais du cadre, même après un rétrécissement
    function keepInside() {
      for (var i = 0; i < balls.length; i++) {
        var ball = balls[i];
        ball.x = w > 2 * ball.radius ? Math.min(Math.max(ball.x, ball.radius), w - ball.radius) : w / 2;
        ball.y = h > 2 * ball.radius ? Math.min(Math.max(ball.y, ball.radius), h - ball.radius) : h / 2;
      }
    }

    function drawMetaballs() {
      var W = canvas.width, H = canvas.height;
      var data = imageData.data;
      var n = balls.length;
      var bx = [], by = [], r2 = [], dy2 = [];
      for (var i = 0; i < n; i++) {
        bx[i] = balls[i].x * scale;
        by[i] = balls[i].y * scale;
        r2[i] = balls[i].radius * balls[i].radius * scale * scale;
      }
      var soft = scale * scale; // le « + 1 » de r² / (d² + 1), en pixels de l'écran
      var idx = 0;

      for (var y = 0; y < H; y++) {
        for (i = 0; i < n; i++) dy2[i] = (y - by[i]) * (y - by[i]) + soft;
        for (var x = 0; x < W; x++) {
          var sum = 0;
          for (i = 0; i < n; i++) {
            var dx = x - bx[i];
            sum += r2[i] / (dx * dx + dy2[i]);
          }

          if (sum > 1) {
            var intensity = Math.min(sum - 1, 1) * 50; // le cœur s'éclaircit là où les champs s'additionnent
            data[idx] = color[0] + intensity;
            data[idx + 1] = color[1] + intensity;
            data[idx + 2] = color[2] + intensity;
          } else {
            data[idx] = background[0];
            data[idx + 1] = background[1];
            data[idx + 2] = background[2];
          }
          data[idx + 3] = 255;
          idx += 4;
        }
      }

      ctx.putImageData(imageData, 0, 0);
    }

    function updateBalls() {
      for (var i = 0; i < balls.length; i++) {
        var ball = balls[i];
        ball.x += ball.vx;
        ball.y += ball.vy;

        if (ball.x < ball.radius) ball.vx = Math.abs(ball.vx);
        if (ball.x > w - ball.radius) ball.vx = -Math.abs(ball.vx);
        if (ball.y < ball.radius) ball.vy = Math.abs(ball.vy);
        if (ball.y > h - ball.radius) ball.vy = -Math.abs(ball.vy);
      }
      keepInside();
    }

    function animate() {
      raf = 0;
      updateBalls();
      drawMetaballs();
      start();
    }

    // La boucle ne tourne que si le bloc est à l'écran, l'onglet visible et le mouvement autorisé
    function start() {
      if (!raf && visible && !document.hidden && !reduce.matches) raf = requestAnimationFrame(animate);
    }

    if ('IntersectionObserver' in window) {
      new IntersectionObserver(function(entries) {
        visible = entries[0].isIntersecting;
        if (visible) start();
        else if (raf) { cancelAnimationFrame(raf); raf = 0; }
      }).observe(root);
    }
    document.addEventListener('visibilitychange', start);

    if ('ResizeObserver' in window) new ResizeObserver(resize).observe(container);
    else window.addEventListener('resize', resize);
    resize();
  });
})();