Inertia Momentum

<div class="md-inertia-stage">
  <div class="md-inertia">
    <div class="md-inertia-box"></div>
  </div>
</div>

.md-inertia-stage,
.md-inertia-stage *,
.md-inertia-stage *::before,
.md-inertia-stage *::after {
  box-sizing: border-box
}

.md-inertia-stage {
  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;
}

.md-inertia {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Centré par le CSS (et non mesuré au chargement) : juste même si le bloc est masqué au départ.
   touch-action: none laisse le doigt saisir le cube au lieu de faire défiler la page. */
.md-inertia-box {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  cursor: grab;
  position: absolute;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  touch-action: none;
  user-select: none;
  transition: none;
}

(function() {
  // Inertia Momentum : saisir, lancer, l'élément glisse puis ralentit (souris, doigt, stylet)
  var friction = 0.95;
  var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

  document.querySelectorAll('.md-inertia').forEach(function(container) {
    var box = container.querySelector('.md-inertia-box');
    if (!box) return;

    var x = 0,
      y = 0,
      vx = 0,
      vy = 0;
    var isDragging = false,
      lastX = 0,
      lastY = 0,
      raf = 0;

    function place() {
      box.style.left = x + 'px';
      box.style.top = y + 'px';
    }

    box.addEventListener('pointerdown', function(e) {
      isDragging = true;
      cancelAnimationFrame(raf);
      x = box.offsetLeft; // position réelle au moment de la saisie
      y = box.offsetTop;
      lastX = e.clientX;
      lastY = e.clientY;
      vx = 0;
      vy = 0;
      try { box.setPointerCapture(e.pointerId); } catch (err) {}
      box.style.cursor = 'grabbing';
      e.preventDefault();
    });

    box.addEventListener('pointermove', function(e) {
      if (!isDragging) return;
      vx = e.clientX - lastX;
      vy = e.clientY - lastY;
      x += vx;
      y += vy;
      place();
      lastX = e.clientX;
      lastY = e.clientY;
    });

    function release() {
      if (!isDragging) return;
      isDragging = false;
      box.style.cursor = 'grab';
      if (reduceMotion.matches) { // mouvement réduit : pas de glissade, l'élément est seulement ramené dans la piste
        x = Math.max(0, Math.min(container.clientWidth - box.offsetWidth, x));
        y = Math.max(0, Math.min(container.clientHeight - box.offsetHeight, y));
        place();
        return;
      }
      raf = requestAnimationFrame(animate);
    }
    box.addEventListener('pointerup', release);
    box.addEventListener('pointercancel', release);

    function animate() {
      if (isDragging) return;
      if (Math.abs(vx) < 0.1 && Math.abs(vy) < 0.1) return;
      vx *= friction;
      vy *= friction;
      x += vx;
      y += vy;
      var maxX = container.clientWidth - box.offsetWidth;
      var maxY = container.clientHeight - box.offsetHeight;
      if (x < 0 || x > maxX) vx *= -0.5;
      if (y < 0 || y > maxY) vy *= -0.5;
      x = Math.max(0, Math.min(maxX, x));
      y = Math.max(0, Math.min(maxY, y));
      place();
      raf = requestAnimationFrame(animate);
    }
  });
})();