# Charada Frase que surge como símbolos sorteados e se revela letra por letra, da esquerda para a direita. > Charada é um componente do THM Componentes que mostra uma frase primeiro como caracteres aleatórios e depois a decifra letra por letra, da esquerda para a direita, quando ela entra na tela. É leve, sem WebGL nem canvas, e combina com sites de segurança digital, produtos de tecnologia e campanhas com clima de mistério. - Categoria: Texto e tipografia - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interação: Rolagem - URL: https://vibecode.thmtecnologia.com/componentes/charada/ ## Como ele é Lembra a cena de filme em que um computador quebra uma senha. Quando o texto entra na tela, ele surge como uma fileira de letras, números e símbolos sorteados, que trocam a cada 50 milissegundos. Ao mesmo tempo, a primeira letra se fixa, depois a segunda, e assim por diante, uma a cada 50 milissegundos no padrão, até a frase inteira ficar legível. Os espaços ficam no lugar desde o início, então o desenho das palavras já se reconhece. As cores vêm de duas classes, uma para os símbolos e outra para as letras reveladas; na demo, cinza para os símbolos e preto ou branco, conforme o tema. ## Você pode estar procurando isto se pediu algo assim - “texto que aparece embaralhado e depois forma a palavra” - “efeito de hacker decifrando a senha no título” - “letras aleatórias que vão virando a frase certa” - “título com cara de filme de espionagem para site de segurança” - “aquele efeito de texto criptografado que se revela sozinho” - “frase que se monta a partir de símbolos quando aparece na tela” - “texto estilo terminal para o topo do meu site de cibersegurança” ## Também chamado de texto criptografado, texto embaralhado, efeito hacker, efeito de decifrar, decrypt text effect, scramble text, text decode animation ## Quando usar - Hero de empresa de segurança digital, criptografia ou proteção de dados - Títulos de produtos de tecnologia, ferramentas para desenvolvedores e infraestrutura - Teasers e campanhas de lançamento com clima de mistério - Revelação de um código, senha ou cupom em destaque ## Quando evitar - Textos longos, em que esperar letra por letra cansa a leitura - Marcas de tom acolhedor, como saúde ou público infantil, em que o visual hacker destoa - Informação que a pessoa precisa ler de imediato, como preço ou aviso ## Como pedir para a sua IA ```text Crie um efeito de texto criptografado no título do hero: a frase começa com caracteres aleatórios e se decifra letra por letra ao entrar na tela, com o texto final acessível a leitores de tela, versão estática para movimento reduzido e as cores da minha marca. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Charada ### Quando Charada começa a animação, e ela se repete? Charada começa a decifrar na primeira vez que entra na tela e não repete quando a pessoa rola de volta. Se a prop text mudar enquanto o componente está visível, o efeito recomeça com a nova frase, o que permite trocar mensagens no mesmo lugar e decifrar cada uma de novo. ### Dá para trocar os símbolos e as cores de Charada? Sim. Charada aceita um conjunto próprio de caracteres na prop charset, como só números ou só letras maiúsculas, e duas classes de estilo: uma para os caracteres embaralhados e outra para os revelados. O prompt do THM Componentes orienta a IA a usar os tokens de cor e tipografia do seu projeto. ### Charada funciona com leitores de tela? Charada coloca a frase final no atributo aria-label do elemento, para que tecnologias assistivas não recebam os símbolos sorteados durante a animação. Como cada letra fica num span próprio, vale testar com o leitor de tela que o seu público usa. O prompt do THM Componentes também pede uma versão estática para movimento reduzido. ## Componentes relacionados - [Cifra](https://vibecode.thmtecnologia.com/componentes/cifra/): Título que surge embaralhado em letras, números e símbolos e vai se acertando até formar a frase. - [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. - [Ditado](https://vibecode.thmtecnologia.com/componentes/ditado/): As palavras saem do desfoque e aparecem uma depois da outra, como se o texto estivesse sendo gerado na hora. --- 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.