document.querySelector(".magic").onmouseenter = event => {magic(30)}  

function magic(speed){
  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
  let interval = null;
  let iteration = 0;


  const screen = document.querySelector(".magic"),
        name = document.querySelector(".magic"); 

  
  clearInterval(interval);
  
  interval = setInterval(() => {
    name.innerText = name.dataset.value
      .split("")
      .map((letter, index) => {
        if(index < iteration) {
          return name.dataset.value[index];
        }
      
        return letters[Math.floor(Math.random() * 26)]
      })
      .join("");
    
    if(iteration >= name.dataset.value.length){ 
      clearInterval(interval);
    }
    
    iteration += 1 / 3;
  }, speed);

}