# Avesso Duas frases no mesmo lugar: uma linha vertical segue o mouse e mostra a outra frase de um lado dela. > Avesso é um componente do THM Componentes que guarda duas frases no mesmo lugar de um cartão escuro: uma linha vertical acompanha o mouse ou o dedo e, da borda esquerda até essa linha, uma frase dá lugar à outra, como uma cortina. Serve para mostrar antes e depois, promessas e chamadas curiosas em landing pages. - 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 - Interação: Mouse, Toque - URL: https://vibecode.thmtecnologia.com/componentes/avesso/ ## Como ele é Pense num cartão escuro, de cantos arredondados e borda quase invisível, com um título no alto. No meio, duas frases ocupam exatamente o mesmo espaço. Quando o mouse entra e se move, surge uma linha vertical discreta que segue o cursor e se inclina alguns graus conforme a posição; da borda esquerda até ela, uma frase cobre a outra, como uma cortina puxada pela mão. Do outro lado, 130 pontinhos brancos, por padrão, flutuam devagar sobre o texto de base. Ao tirar o mouse, a cortina recolhe suavemente. No celular, arrastar o dedo faz o mesmo. ## Você pode estar procurando isto se pediu algo assim - “card que mostra outra frase quando passo o mouse por cima” - “efeito de cortina revelando um texto escondido com o cursor” - “mostrar o antes e depois da mensagem arrastando o mouse” - “texto secreto que aparece conforme o mouse anda para o lado” - “cartão escuro com estrelinhas e uma frase que se revela” - “comparar duas frases no mesmo lugar tipo slider de antes e depois” ## Também chamado de card com frase escondida, hover reveal text, texto escondido no hover, reveal on mousemove, before and after text, efeito cortina no texto ## Quando usar - Antes e depois de uma promessa, como problema e solução - Chamadas curiosas que convidam a pessoa a passar o mouse - Seções de produto com uma frase técnica e outra em linguagem simples - Páginas escuras de tecnologia, eventos e lançamentos ## Quando evitar - Informação que todo mundo precisa ver, já que a segunda frase depende da interação - Sites de visual claro, porque o cartão tem cores escuras fixas - Listas com muitos cartões iguais, que somam centenas de pontinhos animados ## Como pedir para a sua IA ```text Crie um card com revelação de texto por movimento do mouse na seção de antes e depois: duas frases sobrepostas e uma linha vertical que segue o cursor, com suporte a toque, cores do meu tema claro e escuro e versão estática que mostre as duas frases 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 Avesso ### Avesso funciona no celular? Funciona. Avesso trata eventos de toque: ao arrastar o dedo sobre o cartão, a linha acompanha e a frase troca do mesmo jeito que com o mouse. Durante esse arraste, o código impede a rolagem da página, então deixe espaço livre em volta para a pessoa conseguir rolar. ### Dá para trocar os textos e as cores de Avesso? Sim. Avesso recebe o cabeçalho e as duas frases por slots, então você escreve e estiliza cada uma livremente, e há props para a quantidade e a classe dos pontinhos. O cartão vem com fundo escuro fixo; o prompt do THM Componentes orienta a IA a usar os tokens de cor do seu projeto. ### Quem não usa mouse consegue ver a segunda frase de Avesso? No código original, só com toque: a troca de frase de Avesso depende de mouse ou dedo, e o cartão não reage ao teclado. Leitores de tela encontram as duas frases no HTML, mas quem navega só pelo teclado não vê a troca; peça à IA para revelar a frase também no foco. ## Componentes relacionados - [Retoque](https://vibecode.thmtecnologia.com/componentes/retoque/): Duas imagens ou telas sobrepostas e uma linha no meio que você move com o mouse ou o dedo para comparar. - [Pupila](https://vibecode.thmtecnologia.com/componentes/pupila/): Um círculo que segue o mouse e, sobre o título, cresce para revelar uma segunda mensagem escondida. - [Garimpo](https://vibecode.thmtecnologia.com/componentes/garimpo/): Um cartão coberto por uma camada colorida que a pessoa raspa com o mouse ou o dedo para descobrir o prêmio. - [Valete](https://vibecode.thmtecnologia.com/componentes/valete/): Cartão que gira 180 graus ao passar o mouse e mostra o verso, virando para o lado ou de cima para baixo. - [Luar](https://vibecode.thmtecnologia.com/componentes/luar/): Um cartão com um brilho circular suave que acompanha o cursor e some quando o mouse sai. --- 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.