# Cifra Título que surge embaralhado em letras, números e símbolos e vai se acertando até formar a frase. > Cifra é um componente exclusivo do THM Componentes que faz um título surgir embaralhado em letras, números e símbolos e se decifrar letra por letra, da esquerda para a direita. O efeito roda ao entrar na tela e se repete no hover, sem deslocar o layout. Combina com seções de tecnologia, cibersegurança e lançamentos. - Categoria: Texto e tipografia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/cifra/ ## 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, texto que se decifra, 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 ```text 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 Cifra ### Cifra funciona no celular? Funciona. No celular, Cifra se decifra quando entra na tela e repete a animação quando a pessoa toca no título. Tem peso 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. ### Cifra é acessível para leitores de tela? Sim, isso foi previsto. Cifra 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 de Cifra? Sim. Em Cifra, 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. ## Componentes relacionados - [Charada](https://vibecode.thmtecnologia.com/componentes/charada/): Frase que surge como símbolos sorteados e se revela letra por letra, da esquerda para a direita. - [Anagrama](https://vibecode.thmtecnologia.com/componentes/anagrama/): Palavra em maiúsculas que embaralha as letras ao passar o mouse e se forma de novo em menos de um segundo. - [Gralha](https://vibecode.thmtecnologia.com/componentes/gralha/): Faixas do título aparecem deslocadas para os lados com rastros vermelho e ciano, como uma tela com defeito. - [Telegrama](https://vibecode.thmtecnologia.com/componentes/telegrama/): As letras aparecem uma a uma com um cursor piscando, somem e dão lugar à próxima palavra da lista. - [Parafina](https://vibecode.thmtecnologia.com/componentes/parafina/): Palavras que se revezam no título, derretendo uma na outra como gotas que se juntam antes de ficarem nítidas. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.