# Penumbra Uma luz quente acompanha o mouse sobre a foto e revela relevo, brilho e sombras, como uma lanterna. > Penumbra é um componente exclusivo do THM Componentes que reilumina uma fotografia em tempo real: um relevo calculado a partir dos tons claros e escuros da foto recebe uma luz pontual que segue o cursor, com brilho e sombra suave. Sem cursor, a luz passeia sozinha. Funciona bem em heros de turismo, arquitetura, produto e portfólio fotográfico. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse - URL: https://vibecode.thmtecnologia.com/componentes/penumbra/ ## Como ele é É como passar uma lanterna de luz quente sobre uma foto impressa em relevo, num quarto à meia-luz. A imagem fica numa penumbra levemente azulada e, onde a luz chega, ganha cor, textura e volume: as áreas claras parecem saltar, as escuras afundam, as partes altas brilham e pequenas sombras caem no sentido oposto ao da luz. Céu e brancos estourados ficam quase planos, sem halo nos contornos. A luz acompanha o cursor com suavidade e, quando ele sai da imagem, faz um passeio lento pela foto. Ao carregar, a imagem surge aos poucos de um fundo claro. ## Você pode estar procurando isto se pediu algo assim - “foto que acende onde passo o mouse, tipo lanterna” - “luz seguindo o cursor por cima da imagem do hero” - “imagem com relevo e sombra que muda com o mouse” - “deixar a foto do hotel com clima de cinema no topo do site” - “efeito de holofote numa fotografia de arquitetura” - “foto escura que a pessoa vai iluminando com o mouse” ## Também chamado de luz que segue o mouse, reiluminação, dynamic lighting, luz dinâmica, normal map lighting, efeito lanterna, spotlight on image, iluminação por cursor ## Quando usar - Hero de hotel, pousada, turismo ou destino com foto marcante - Portfólio de arquitetura ou de interiores, em que textura importa - Página de produto com superfície rica, como couro, pedra ou madeira - Portfólio fotográfico com clima cinematográfico ## Quando evitar - Fotos em que a cor exata importa, já que a luz altera tons e brilho - Imagens de outro domínio sem CORS liberado, que não carregam como textura ## Como pedir para a sua IA ```text Crie um efeito de reiluminação em WebGL na foto do hero: relevo calculado pela luminância e uma luz pontual quente que segue o cursor, com brilho e sombra suave. Quero luz parada para quem prefere menos movimento, texto alternativo, pausa fora da tela e a foto com vinheta em CSS quando não houver WebGL. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Penumbra ### Penumbra funciona sem WebGL? Funciona, com uma versão simplificada. Se o navegador não oferece WebGL2 nem WebGL, Penumbra mostra a foto como fundo e aplica uma vinheta escura em CSS que se abre onde está o cursor. Quando há suporte, o componente usa WebGL2 e recorre ao WebGL como alternativa. ### Penumbra respeita quem prefere menos movimento? Sim. Com a redução de movimento ativada no sistema, a luz de Penumbra para de passear sozinha e fica num ponto fixo, mudando de lugar só quando o cursor a leva, sem suavização. A foto aparece sem o esmaecimento de entrada, e o desenho para quando nada se move. Fora da tela, o componente também para. ### Dá para trocar a cor da luz em Penumbra? Dá. Penumbra tem a prop lightColor, um tom creme quente por padrão, além de intensidade, alcance, profundidade do relevo, luz ambiente e brilho, e o prompt do THM Componentes orienta a IA a usar os tokens de cor do projeto. Com relief em zero, a foto fica plana e só a luz se move. ## Componentes relacionados - [Sonda](https://vibecode.thmtecnologia.com/componentes/sonda/): A foto começa como uma grade de pontos e uma onda de luz ciano passa por ela, revelando a imagem. - [Miragem](https://vibecode.thmtecnologia.com/componentes/miragem/): Uma placa de vidro arredondada desliza sobre a foto e curva a imagem nas bordas, como uma lente de verdade. - [Garoa](https://vibecode.thmtecnologia.com/componentes/garoa/): A foto fica debaixo de uma lâmina d'água que ondula com o mouse, com os cliques e com gotas de chuva. - [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. - [Lambe-lambe](https://vibecode.thmtecnologia.com/componentes/lambe-lambe/): A foto vira pontinhos de impressão, como jornal ou gibi, e uma lupa mostra a imagem original. --- 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.