<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrambleTextPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<script>
  const targets = document.querySelectorAll(".aleatoriox");

  targets.forEach((el) => {
    const st = new SplitText(el, {
      type: "words,chars",
      wordsClass: "word",
      charsClass: "char"
    });

    st.chars.forEach((char) => {
      gsap.set(char, { attr: { "data-content": char.textContent } });
    });

    el.onpointermove = (e) => {
      st.chars.forEach((char) => {
        const rect = char.getBoundingClientRect();
        const cx = rect.left + rect.width / 2;
        const cy = rect.top + rect.height / 2;
        const dx = e.clientX - cx;
        const dy = e.clientY - cy;
        const dist = Math.sqrt(dx * dx + dy * dy);

        if (dist < 100) {
          gsap.to(char, {
            overwrite: true,
            duration: Math.max(0.2, 1.2 - dist / 100),
            scrambleText: {
              text: char.dataset.content,
              chars: ".:",
              speed: 0.5,
            },
            ease: "none",
          });
        }
      });
    };
  });
</script>
<style>
.aleatoriox{
    cursor: pointer;
}    
</style>