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
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.
