Hacked Text Effect - JavaScript

hacked-effect.js

// Makes a H1 element have a "hacked" effect on hover.

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let interval = null;

document.querySelector("h1").onmouseover = event => {
  let iteration = 0;
  const targetValue = event.target.dataset.value; 

  clearInterval(interval);

  interval = setInterval(() => {
    const currentTextInDOM = event.target.innerText;

    const processingLength = Math.max(currentTextInDOM.length, targetValue.length);

    event.target.innerText = Array.from({ length: processingLength })
      .map((_, index) => {
        if (index < iteration) {
          return targetValue[index] || "";
        }
        return letters[Math.floor(Math.random() * 26)];
      })
      .join("");

    if (iteration >= targetValue.length) {
      clearInterval(interval);
      event.target.innerText = targetValue;
    }

    iteration += 1 / 3;
  }, 30);
};