<div class="scrambled-text-wrapper">
  <p id="scrambledText">L'idée de devoir me lever, exercer 172 muscles à chaque pas sur 20 mètres, juste pour pouvoir m'asseoir sur de la porcelaine froide et pisser des toxines encore et encore pour le reste de ma vie, donne l'impression que tout le concept de la vie est une longue blague sadique.</p>
</div>

<style>
  .scrambled-text-wrapper {
    color: white;
    font-weight: bold;
    font-size: 2rem;
    font-family: monospace;
    padding: 2rem;
    background: transparent;
    text-align: center;
  }
  .scrambled-char {
    display: inline-block;
    transition: all 0.1s linear;
  }
  .scrambled-char.space {
    width: 0.6em;
  }
</style>

<script>
  const scrambleChars = ".:;!?@#&$%";
  const radius = 100;
  const textElement = document.getElementById("scrambledText");
  const originalText = textElement.textContent;

  textElement.innerHTML = "";
  for (let char of originalText) {
    const span = document.createElement("span");
    span.className = "scrambled-char";
    span.textContent = char === " " ? "\u00A0" : char;
    if (char === " ") span.classList.add("space");
    span.dataset.original = char;
    textElement.appendChild(span);
  }

  const chars = textElement.querySelectorAll(".scrambled-char");

  document.addEventListener("pointermove", (e) => {
    chars.forEach((char) => {
      const rect = char.getBoundingClientRect();
      const dx = e.clientX - (rect.left + rect.width / 2);
      const dy = e.clientY - (rect.top + rect.height / 2);
      const dist = Math.hypot(dx, dy);

      if (dist < radius && char.dataset.original !== " ") {
        const scramble = scrambleChars[Math.floor(Math.random() * scrambleChars.length)];
        char.textContent = scramble;
      } else {
        char.textContent = char.dataset.original === " " ? "\u00A0" : char.dataset.original;
      }
    });
  });
</script>