Como ele é
Funciona como uma lanterna apontada para uma parede escura. Em repouso, aparece uma mensagem sobre fundo branco e um ponto preto de 10 pixels que segue o cursor. Quando o mouse entra no texto central, o ponto cresce em 0,2 segundo até um círculo de 600 pixels, o fundo em volta escurece, e dentro do círculo surge a outra camada: um texto branco e grande sobre preto. Movendo o mouse, o círculo passeia pela frase e mostra só o trecho iluminado; ao sair do texto, volta a ser um ponto. O formato vem de uma imagem SVG usada como máscara, e a seção ocupa a altura da tela.
Você pode estar procurando isto se pediu algo assim
- texto escondido que aparece quando passo o mouse por cima
- efeito de lanterna que revela outra frase no topo do site
- círculo que segue o cursor e mostra o que tem por baixo
- mensagem secreta no hero que só aparece com o mouse
- fundo que escurece e um holofote revela o texto onde o mouse está
- duas camadas de conteúdo e um buraco que mostra a de baixo
Também chamado de
- holofote no texto
- máscara SVG
- flashlight effect
- efeito lanterna
- spotlight reveal
- cursor reveal
- hover mask reveal
Quando usar
- Hero de campanha com uma frase de efeito escondida sob outra
- Página de lançamento que provoca curiosidade antes de revelar o produto
- Portfólios e sites de agência com interação lúdica no primeiro bloco
- Comparar duas versões de uma mensagem, como problema e solução
Quando evitar
- Sites acessados principalmente pelo celular, porque o efeito depende do mouse
- Informações importantes, que não podem ficar escondidas atrás de uma interação
Como pedir para a sua IA
Crie um efeito de lanterna com máscara SVG no hero: um círculo segue o cursor e, sobre o título, cresce e revela uma segunda mensagem por baixo, nas cores do meu tema claro e escuro, com as duas mensagens acessíveis sem mouse 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 Pupila
Pupila funciona no celular?
Não de forma nativa. Pupila reage apenas a eventos de mouse, como mover o cursor e entrar ou sair da área do texto, então no toque a segunda mensagem pode nem aparecer. Para públicos que usam mais o celular, peça à IA uma alternativa, como revelar a mensagem ao tocar ou mostrar as duas camadas em sequência.
Dá para trocar as cores e o formato de Pupila?
Sim. As cores de Pupila vêm fixas no código, com fundo branco que escurece no hover e camada preta com texto branco, e o prompt do THM Componentes orienta a IA a substituir essas cores pelos tokens do projeto. O formato do círculo vem de uma imagem SVG usada como máscara, e as props size e revealSize definem os dois tamanhos.
O leitor de tela lê as duas mensagens de Pupila?
Sim, porque as duas camadas de Pupila ficam no HTML como texto comum, mesmo quando uma delas está escondida pela máscara. Quem usa leitor de tela ouve as duas frases em sequência, sem a surpresa visual, então vale ordenar as mensagens para que façam sentido lidas juntas.
