Efeito lanterna: explore uma página escura com uma lanterna
O Efeito de lanterna apaga as luzes de uma página web e entrega uma lanterna ao visitante. Ela fica baixa, em um canto, como em um jogo em primeira pessoa, e gira em perspectiva real para onde o ponteiro for, iluminando um foco de bordas suaves com um halo fraco em volta. Um raio atravessa o ar a partir da lente, a poeira flutua no feixe e a página fora da luz fica escura e fora de foco. A página por baixo nunca muda: links e botões continuam funcionando no escuro.
Como funciona
Escolha um estilo
Comece com Passeio noturno, Luz quente, Holofote de palco ou outro estilo e mova o ponteiro sobre a prévia para apontar a luz pela página.
Molde a luz
Escolha a mão e a lanterna (alumínio usinado, preto clássico ou desenhada em plano), o tamanho e a borda do foco, o raio, a névoa e a poeira, e o quanto o resto da página escurece e desfoca. Desenhado com escolhe entre WebGL, o mais leve, e Three.js, um modelo 3D real.
Use ou exporte
Entre com uma conta gratuita do UX Pilot para colocar o resultado no canvas do UX Pilot ou exportá-lo como HTML ou PNG.
O que você pode criar
Hero com as luzes apagadas
Abra uma página de lançamento ou um teaser no escuro e deixe os visitantes encontrarem o título com a lanterna.
Easter eggs e detalhes escondidos
Esconda um código, um desconto ou uma mensagem que só aparece onde a luz cai.
Jogos, mistério e Halloween
Crie o clima para um jogo, um escape room, um podcast ou uma campanha de Halloween com uma luz que se move com o visitante.
Um holofote em uma coisa só
Use Holofote de palco, sem mão, para colocar um único recurso, um produto ou um retrato em um círculo de luz.
Perguntas frequentes
O que é um efeito lanterna?
Em um site, um efeito lanterna escurece a página e ilumina só um círculo em volta do ponteiro, como se o visitante a explorasse com uma lanterna. O Efeito de lanterna adiciona uma lanterna na mão que gira na direção da luz, um raio no ar, poeira flutuando e um desfoque fora do feixe.
A lanterna altera minha página?
Não. A escuridão, o feixe e a mão são desenhados sobre a página, que continua igual por baixo: o texto ainda pode ser selecionado e links e botões continuam funcionando. Com o movimento reduzido ativado, a página abre escura com a luz acesa e nada se move sozinho.
Qual é a diferença entre WebGL e Three.js?
Os dois desenham a mesma luz, a mesma poeira e a mesma escuridão. O WebGL é o mais leve e desenha a lanterna em um shader. O Three.js a desenha como um modelo 3D real, com aletas, uma empunhadura recartilhada e um clipe de bolso que pegam a luz, e demora mais para carregar. Escolha qualquer um em Desenhado com.
Dá para fazer um efeito lanterna sem código?
Sim. Ajuste no navegador e depois entre com uma conta gratuita do UX Pilot para colocar o resultado no canvas do UX Pilot ou exportá-lo como HTML ou PNG.