<div class="container">
  <span class="fancy" data-text="Battambang">Battambang</span>
</div>

html {
  background-color: #0D0208;
  color: #FFF;
  font-family: "Space Mono", monospace;
  font-size: 96px;
  text-transform: uppercase;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .fancy {
  background: -webkit-linear-gradient(-45deg,rgb(0,255,171) 25%,rgb(0 177 118) 100%);
  -webkit-background-clip: text;
  color: #00ffab;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(0,255,171,.2));
}

const LETTERS = 'ABCDEFGHIJKLMNOPQRSTVUWXYZ0123456789';

const fancyElement = document.querySelector('.fancy')

fancyElement.addEventListener('mouseover', (e) => {
  const text = e.target.dataset.text
  let counter = 0;
  
  const loop = setInterval(() => {
    e.target.innerText = text.split('')
      .map((letter, index) => {
        if(index < counter) {
          return letter
        }
      
        return LETTERS[Math.floor(Math.random() * LETTERS.length)]
    }).join('')
    
    counter += 1 / 2
    
    if(counter > text.length) {
      clearInterval(loop)
    }
  }, 50)
});