Text Scramble

Texto que se revela con caracteres aleatorios. Efecto hacker muy usado en landings de tech, crypto y agencias.

Código

class TextScramble {
  el: HTMLElement
  chars = "!<>-_\/[]{}—=+*^?#@$%&"
  
  setText(newText: string) {
    const length = newText.length
    let frame = 0

    const update = () => {
      let output = ""

      for (let i = 0; i < length; i++) {
        if (i < frame / 3) {
          // Letra resuelta
          output += newText[i]
        } else {
          // Letra aleatoria
          output += chars[Math.floor(Math.random() * chars.length)]
        }
      }

      el.innerText = output

      if (frame < length * 3) {
        frame++
        requestAnimationFrame(update)
      }
    }

    update()
  }
}