# Anagrama Palavra em maiúsculas que embaralha as letras ao passar o mouse e se forma de novo em menos de um segundo. > Anagrama é um componente do THM Componentes que embaralha as letras de uma palavra com caracteres aleatórios e as acerta da esquerda para a direita em 0,8 segundo, a cada passagem do mouse e, se quiser, ao carregar a página. Usa caixa alta e fonte monoespaçada e funciona bem em menus, links e marcas de tecnologia. - 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: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/anagrama/ ## 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 ```text 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. ## 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. - [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. - [Cambalhota](https://vibecode.thmtecnologia.com/componentes/cambalhota/): Ao passar o mouse, cada letra desliza na vertical e dá lugar a uma cópia, numa onda que atravessa a palavra. - [Pirueta](https://vibecode.thmtecnologia.com/componentes/pirueta/): Ao passar o mouse, cada letra gira como um pequeno cubo, uma depois da outra, numa onda em 3D. - [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. --- 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.