origamid · November 24, 2025 23:50
diff --git a/glitch.html b/glitch.html
 <!DOCTYPE html>
 <html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Efeito Glitch</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000;
        margin: 0;
        color: white;
        font-family: 'IBM Plex Sans Condensed', monospace;
      }

      h1 {
        margin: 0 0 1rem 0;
        font-size: 3rem;
        font-weight: 500;
        line-height: 1.125;
        text-transform: uppercase;
        background-image: linear-gradient(
          90deg,
          color(display-p3 0.75 0.95 0.1) 20%,
          color(display-p3 0.2 0.75 0.15),
          color(display-p3 0.75 0.95 0.1) 80%
        );
        background-clip: text;
        color: transparent;
      }

      h2 {
        margin: 0;
        font-size: 2rem;
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <h1 data-glitch>Origamid</h1>
    <h2 data-glitch>Front End e UI Design</h2>
    <script>
      /**
       * Aplica o efeito glitch ao elemento HTML fornecido.
       * @param {HTMLElement} el
       */
      function glitch(el) {
        // Salva o texto original
        if (!el.dataset.glitch) el.dataset.glitch = el.innerText;

        // Separa o texto em palavras
        const text = el.dataset.glitch;
        const words = text.split(' ');

        // Acha o tamanho da maior palavra, para definir quando parar o interval
        const stop = Math.max(...words.map((w) => w.length));

        // Limpa o interval anterior, se existir
        if (el.dataset.interval) clearInterval(Number(el.dataset.interval));

        // Mínimo de vezes que uma letra anima
        let min = 5;

        let iterations = 0;

        const interval = setInterval(() => {
          // Reconstroi o texto a cada intervalo com números aleatórios
          el.innerText = words
            .map((word) => {
              return word
                .split('')
                .map((letter, index) => {
                  // retorna a letra ou o número aleatório.
                  // cria um efeito de onda na animação com o ||
                  if (iterations > index + min || index > iterations) {
                    return letter;
                  } else {
                    return Math.floor(Math.random() * 10);
                  }
                })
                .join('');
            })
            .join(' '); // junta as palavras

          el.dataset.interval = String(interval);

          iterations++;
          // Para quando o total de iterações for maior que a maior palavra
          if (iterations >= stop + min) {
            clearInterval(Number(el.dataset.interval));
            el.innerText = text; // Volta ao estado inicial
          }
        }, 75); // Velocidade da animação
      }

      const glitchEl = document.querySelectorAll('[data-glitch]');
      glitchEl.forEach((el) => {
        el.addEventListener('mouseover', () => {
          glitch(el);
        });
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Efeito Glitch</title>
	<style>
	body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #000;
	margin: 0;
	color: white;
	font-family: 'IBM Plex Sans Condensed', monospace;
	}

	h1 {
	margin: 0 0 1rem 0;
	font-size: 3rem;
	font-weight: 500;
	line-height: 1.125;
	text-transform: uppercase;
	background-image: linear-gradient(
	90deg,
	color(display-p3 0.75 0.95 0.1) 20%,
	color(display-p3 0.2 0.75 0.15),
	color(display-p3 0.75 0.95 0.1) 80%
	);
	background-clip: text;
	color: transparent;
	}

	h2 {
	margin: 0;
	font-size: 2rem;
	font-weight: 500;
	}
	</style>
	</head>
	<body>
	<h1 data-glitch>Origamid</h1>
	<h2 data-glitch>Front End e UI Design</h2>
	<script>
	/**
	* Aplica o efeito glitch ao elemento HTML fornecido.
	* @param {HTMLElement} el
	*/
	function glitch(el) {
	// Salva o texto original
	if (!el.dataset.glitch) el.dataset.glitch = el.innerText;

	// Separa o texto em palavras
	const text = el.dataset.glitch;
	const words = text.split(' ');

	// Acha o tamanho da maior palavra, para definir quando parar o interval
	const stop = Math.max(...words.map((w) => w.length));

	// Limpa o interval anterior, se existir
	if (el.dataset.interval) clearInterval(Number(el.dataset.interval));

	// Mínimo de vezes que uma letra anima
	let min = 5;

	let iterations = 0;

	const interval = setInterval(() => {
	// Reconstroi o texto a cada intervalo com números aleatórios
	el.innerText = words
	.map((word) => {
	return word
	.split('')
	.map((letter, index) => {
	// retorna a letra ou o número aleatório.
	// cria um efeito de onda na animação com o \|\|
	if (iterations > index + min \|\| index > iterations) {
	return letter;
	} else {
	return Math.floor(Math.random() * 10);
	}
	})
	.join('');
	})
	.join(' '); // junta as palavras

	el.dataset.interval = String(interval);

	iterations++;
	// Para quando o total de iterações for maior que a maior palavra
	if (iterations >= stop + min) {
	clearInterval(Number(el.dataset.interval));
	el.innerText = text; // Volta ao estado inicial
	}
	}, 75); // Velocidade da animação
	}

	const glitchEl = document.querySelectorAll('[data-glitch]');
	glitchEl.forEach((el) => {
	el.addEventListener('mouseover', () => {
	glitch(el);
	});
	});
	</script>
	</body>
	</html>
No results found