So, I have a basic working example where I move the cursor/mouse which generates a div with some styling that represents a wavy pattern based on clientX.

Only works if I add addEventlistener to window: window.onmousemove= e => AnimationBubble(e.clientX);

Don't ask me what this function does, or please check if there is something wrong with it! Let me tell you, there is no problem/bug with this function, it's just a simple function that accepts mouse clientX pos and generates a div with some classes and removes it after a few seconds.

I found that adding event listeners throughout the window was useless, whereas I could save a lot of CPU usage if I added mousemove eventlistener to the parent div. Indicates that the div will only be generated when the user hovers over the parent div/container. I'm thinking of adding this to the footer section to make it more interactive for users.

const wrapper = document.getElementById("bubble_wrapper");

const animationBubble = (x) => {
  const bubble = document.createElement("div");
  bubble.className = "bubble";
  bubble.style.left = `${x}px`;
  wrapper.appendChild(bubble);
  setTimeout(() => wrapper.removeChild(bubble), 2000)
}

// wrapper.addEventListener('mouseover', (e) => {
//     console.log("hi")
//     animationBubble(e.clientX);
// });

window.onmousemove = e => animationBubble(e.clientX);

#bubble_wrapper {
  height           : 50%;
  width            : 100%;
  background-color : black;
  position         : fixed;
  bottom           : 0;
  overflow         : hidden;
  pointer-events   : none;
  }
.bubble {
  height           : max(300px, 30vw);
  width            : max(300px, 30vw);
  background-color : rgb(33, 150, 243);
  border-radius    : 100%;
  position         : absolute;
  left             : 50%;
  top              : 100%;
  animation        : wave 2s ease-in-out infinite;
}
@keyframes wave {
  from, to { transform: translate(-50%,   0%); }
  50%      { transform: translate(-50%, -20%); }
  }

<div id="bubble_wrapper"></div>