🔐 Texto embaralhado com CSS (Scramble Effect)

Introdução

O Scramble Effect é um efeito visual criado apenas com HTML + CSS, onde o texto aparece embaralhado e, após alguns instantes, revela uma mensagem final. Esse tipo de animação é bastante usado em sites de portfólio, introduções ou telas de loading, dando um ar tecnológico e misterioso.

Código explicado

Estrutura HTML

<span class="scramble"></span>

Um simples span vazio com a classe scramble. O conteúdo será gerado dinamicamente via CSS.

Estilo e Animação CSS

.scramble::after {
    display: inline-block;                 /* Garante que o pseudo-elemento ocupe espaço */
    animation: scramble 1s steps(1) forwards; /* Executa a animação */
    white-space: nowrap;                   /* Evita quebra de linha no texto */
    content: "▒▒▒▒";                       /* Conteúdo inicial (texto embaralhado) */
    font-family: monospace;                /* Fonte de largura fixa para manter alinhamento */
}

@keyframes scramble {
    10% { content: "▓▒░▒"; }
    20% { content: "▒▒▓░"; }
    30% { content: "░▓▒▒"; }
    40% { content: "▒░▓▒"; }
    50% { content: "▓▒▒░"; }
    100% { content: "Access Granted"; }    /* Mensagem final revelada */
}

🔑 Detalhes importantes:

Exemplo Completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scramble Effect</title>
  <style>
    body {
      background: #0f172a;
      color: #38bdf8;
      font-size: 2rem;
      font-family: monospace;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .scramble::after {
      display: inline-block;
      animation: scramble 1.5s steps(1) forwards;
      white-space: nowrap;
      content: "▒▒▒▒";
      font-family: monospace;
    }

    @keyframes scramble {
      10% { content: "▓▒░▒"; }
      20% { content: "▒▒▓░"; }
      30% { content: "░▓▒▒"; }
      40% { content: "▒░▓▒"; }
      50% { content: "▓▒▒░"; }
      100% { content: "Access Granted"; }
    }
  </style>
</head>
<body>
  <span class="scramble"></span>
</body>
</html>

Observações