Como ele é
Lembra o rolo de uma máquina caça-níquel girando uma casa e parando na mesma letra. Ao passar o mouse, cada letra desliza para baixo e some, enquanto uma cópia idêntica desce de cima e ocupa o lugar dela, letra após letra, com 30 milissegundos de diferença, numa mola de 0,7 segundo. O resultado é uma onda que atravessa a palavra sem mudar o texto. A direção pode ser invertida, para as letras subirem, a onda pode começar pela primeira letra, pela última ou pelo centro, e a ordem pode ser sorteada. No modo pingpong, as letras ficam trocadas enquanto o mouse está em cima e voltam quando ele sai.
Você pode estar procurando isto se pediu algo assim
- letras do menu que rolam para cima quando passo o mouse
- link com efeito de letra trocando na vertical no hover
- texto do botão que gira as letras igual roleta
- aquele efeito de link de site de agência em que as letras sobem
- palavra que faz uma onda de letras ao passar o cursor
- menu de navegação com animação nas letras, estilo portfólio
- efeito de hover em texto que não seja só sublinhado
Também chamado de
- troca de letras no hover
- letras rolando
- letter swap
- rolling text hover
- text roll effect
- letter flip hover
- staggered hover text
Quando usar
- Itens de menu e links de navegação em sites de agências e portfólios
- Botões de texto, como ver projeto, falar conosco e saiba mais
- Rodapés e listas de links que pedem um detalhe a mais no hover
- Nomes de projetos ou de seções numa página de portfólio
Quando evitar
- Sites acessados principalmente no celular, onde o efeito de passar o mouse não aparece de forma confiável
- Telas com muitos links próximos, em que vários hovers seguidos deixam a página agitada
Como pedir para a sua IA
Crie um efeito de troca de letras no hover nos links do menu: cada letra rola na vertical e é substituída por uma cópia em sequência, mantendo o texto acessível a leitores de tela, foco por teclado nos links e versão estática para movimento reduzido.
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 Letter Swap
O Letter Swap é acessível para leitores de tela?
Nessa parte, sim. O Letter Swap coloca o texto completo num elemento visível só para leitores de tela e esconde as letras animadas com aria-hidden, então a frase é lida uma vez, sem soletrar. Como o elemento raiz é um span, envolva o componente num link ou botão de verdade para ter foco e navegação por teclado.
Qual a diferença entre os modos forward e pingpong do Letter Swap?
No modo forward, o padrão, o Letter Swap faz a troca uma vez a cada entrada do mouse e volta ao estado inicial sem que se perceba. No pingpong, as letras trocam quando o mouse entra e retornam quando ele sai, num vaivém. Os dois aceitam ordem sorteada, origem da onda e direção vertical.
O Letter Swap funciona no celular?
O texto aparece e o clique funciona normalmente, mas a animação do Letter Swap dispara quando o mouse entra no elemento, algo que telas de toque só simulam em alguns navegadores. Em projetos voltados ao celular, trate o efeito como um detalhe para desktop ou peça à IA uma variação disparada pelo toque.
