# Cambalhota Ao passar o mouse, cada letra desliza na vertical e dá lugar a uma cópia, numa onda que atravessa a palavra. > Cambalhota é um componente do THM Componentes que anima as letras de um texto no hover: cada uma desliza na vertical e é trocada por uma cópia idêntica, em sequência, como uma onda. Tem modo de ida e de vaivém, ordem sorteada e texto acessível a leitores de tela, e combina com menus, links e botões de texto. - 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/cambalhota/ ## 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, letras de caça-níquel, 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 ```text 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 Cambalhota ### Cambalhota é acessível para leitores de tela? Nessa parte, sim. Cambalhota 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 de Cambalhota? No modo forward, o padrão, Cambalhota 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. ### Cambalhota funciona no celular? O texto aparece e o clique funciona normalmente, mas a animação de Cambalhota 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. ## Componentes relacionados - [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. - [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. - [Filete](https://vibecode.thmtecnologia.com/componentes/filete/): Uma linha fina surge embaixo da palavra quando o mouse passa, crescendo do centro ou atravessando de um lado ao outro. - [Bobina](https://vibecode.thmtecnologia.com/componentes/bobina/): Cada linha de texto rola na vertical e dá lugar a uma cópia idêntica, no ritmo da rolagem. - [Adiante](https://vibecode.thmtecnologia.com/componentes/adiante/): Botão em pílula com um ponto que cresce até preencher tudo no hover, enquanto o texto troca de lugar e ganha uma seta. --- 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.