# Pupila Um círculo que segue o mouse e, sobre o título, cresce para revelar uma segunda mensagem escondida. > Pupila é um componente do THM Componentes que esconde uma segunda mensagem sob a primeira e a mostra por um círculo que segue o mouse, como uma lanterna. Pequeno como um ponto enquanto o cursor passeia, o círculo cresce até 600 pixels sobre o texto central. Serve para heros com mensagem oculta e frases de efeito. - Categoria: Efeitos especiais - 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 - URL: https://vibecode.thmtecnologia.com/componentes/pupila/ ## 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 ```text 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. ## Componentes relacionados - [Avesso](https://vibecode.thmtecnologia.com/componentes/avesso/): Duas frases no mesmo lugar: uma linha vertical segue o mouse e mostra a outra frase de um lado dela. - [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. - [Monóculo](https://vibecode.thmtecnologia.com/componentes/monoculo/): Um círculo de aumento segue o mouse sobre a foto e mostra os detalhes ampliados, sem sair do lugar. - [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. - [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. --- 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.