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
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.
