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
- relight
- 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
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 Relight
O Relight funciona sem WebGL?
Funciona, com uma versão simplificada. Se o navegador não oferece WebGL2 nem WebGL, o Relight mostra a foto como fundo e aplica uma vinheta escura em CSS que se abre onde está o cursor. Quando há suporte, ele usa WebGL2 e recorre ao WebGL como alternativa.
O Relight respeita quem prefere menos movimento?
Sim. Com a redução de movimento ativada no sistema, a luz do Relight 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 no Relight?
Dá. O Relight 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.
