Como ele é
Lembra o painel de embarque de um aeroporto trocando as letras até formar o destino. O texto aparece em letras maiúsculas e fonte monoespaçada, como num terminal. Sempre que o mouse passa por cima, e também ao carregar a página quando a opção animateOnLoad está ligada, como na demo, as letras viram uma mistura de letras aleatórias que se acertam da esquerda para a direita até a palavra se formar de novo, em 0,8 segundo no padrão. Os espaços ficam parados. Na primeira exibição, cada letra também desce um pouco enquanto surge do transparente. O componente não define cores e herda a cor do texto ao redor.
Você pode estar procurando isto se pediu algo assim
- letras que embaralham quando passo o mouse no link
- menu com efeito de hacker ao passar o cursor
- texto que troca de letras rapidinho e volta a formar a palavra
- aquele efeito de painel de aeroporto nas letras do título
- nome da marca que se embaralha no hover, estilo terminal
- links do menu com cara de site de tecnologia
- palavra que pisca letras aleatórias antes de aparecer
Também chamado de
- texto embaralhado no hover
- efeito hacker
- efeito painel de aeroporto
- scramble text
- text scramble hover
- shuffle text effect
Quando usar
- Links e itens de menu em sites de tecnologia, games ou agências digitais
- Nome da marca no cabeçalho, com um toque de terminal ao passar o mouse
- Rótulos curtos de seções, como serviços, projetos e contato
- Portfólios de desenvolvedores e estúdios com estética tech
Quando evitar
- Textos longos, que viram uma linha de letras aleatórias difícil de ler
- Marcas que precisam de minúsculas ou da própria fonte, já que o componente força caixa alta e fonte monoespaçada
Como pedir para a sua IA
Crie um efeito de texto embaralhado no hover para os links do menu: as letras trocam por caracteres aleatórios e se acertam da esquerda para a direita em menos de um segundo, com rótulo acessível com o texto completo, versão estática para movimento reduzido e a fonte do meu projeto.
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 Anagrama
Anagrama funciona no celular?
Anagrama pode rodar a animação ao carregar a página, com a prop animateOnLoad, o que funciona em qualquer tela. A repetição depende do evento de passar o mouse; em telas de toque, ela só acontece se o navegador simular esse evento ao tocar, o que varia. Se o efeito for importante no celular, peça à IA para disparar também no toque.
Dá para mudar a velocidade e o texto de Anagrama?
Sim. Em Anagrama, a prop text define a palavra e a prop duration define a duração total da animação em milissegundos, 800 no padrão, qualquer que seja o tamanho do texto. Se o texto mudar, a animação roda de novo. A prop animateOnLoad liga a animação ao carregar a página; sem ela, o efeito acontece só no hover.
Anagrama sempre mostra o texto em maiúsculas?
Sim. Anagrama converte cada letra para maiúscula e usa fonte monoespaçada, o que reforça a estética de terminal, e as letras sorteadas durante a animação vão só de A a Z. Se a sua marca precisar de minúsculas ou de outra fonte, peça à IA para remover a conversão e aplicar a tipografia do projeto, que o prompt do THM Componentes já manda usar.
