Como ele é
Lembra a cena de filme em que um computador quebra uma senha. Cada letra do título começa trocando rápido entre caracteres aleatórios, menores, em índigo e fonte monoespaçada. Depois de pouco menos de meio segundo, as letras se fixam uma a uma, numa onda da esquerda para a direita, até a frase aparecer inteira em azul-marinho. Cada posição já reserva a largura da letra final, então o texto não pula nem muda de tamanho durante o efeito, e as palavras não se quebram no meio. A animação roda quando o título entra na tela e se repete ao passar o mouse.
Você pode estar procurando isto se pediu algo assim
- texto que aparece embaralhado e depois forma a palavra
- título com letras trocando rápido até revelar a frase, estilo hacker
- efeito de senha sendo decifrada no título do site
- aquele efeito de filme em que o computador decodifica um texto
- letras aleatórias que se acertam uma por uma quando passo o mouse
- título com cara de código para uma página de cibersegurança
- texto tipo Matrix que se revela quando a seção aparece na tela
Também chamado de
- texto embaralhado
- scramble text
- efeito de decodificação
- decode text effect
- text scramble
- efeito hacker
- decrypt text
Quando usar
- Títulos de seção em sites de tecnologia, software ou cibersegurança
- Lançamento de produto que pede um tom de código e de mistério
- Hero de evento de tecnologia ou hackathon com frase curta
- Palavra-chave que precisa chamar atenção quando a pessoa rola até ela
Quando evitar
- Parágrafos e textos longos, em que o embaralhamento atrapalha a leitura
- Marcas de tom acolhedor, como saúde ou infantil, em que o visual de código destoa
- Vários títulos com o efeito na mesma tela, o que cansa e tira o destaque
Como pedir para a sua IA
Crie um efeito de texto que se decodifica, estilo scramble text, no título da seção: as letras começam embaralhadas e se fixam uma a uma ao entrar na tela e no hover, sem deslocar o layout, com o texto final legível por leitores de tela e versão estática para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Decode Text
O Decode Text funciona no celular?
Funciona. No celular, o Decode Text se decifra quando entra na tela e repete a animação quando a pessoa toca no título. É classificado como Leve no THM Componentes, porque usa apenas elementos de texto, sem canvas nem WebGL, e para quem ativa a redução de movimento no sistema a frase já aparece pronta, sem embaralhar.
O Decode Text é acessível para leitores de tela?
Foi pensado para isso. O Decode Text expõe a frase final num rótulo acessível e esconde dos leitores de tela os glifos que trocam durante a animação, para que a pessoa não ouça a sequência de caracteres aleatórios. Vale testar no leitor de tela que o seu público mais usa.
Dá para trocar os caracteres e o ritmo do Decode Text?
Sim. No Decode Text, a prop characters define os glifos do embaralhamento, por exemplo só 0 e 1 para um tom binário. Também dá para ajustar o intervalo entre trocas, o atraso entre letras e o tempo inicial de embaralhamento, usar fonte monoespaçada e tocar o efeito só na primeira vez que o título aparece.
