Efecto linterna: explora una página oscura con una linterna
Efecto linterna apaga las luces de una página web y le da una linterna al visitante. La sostiene baja en una esquina, como en un juego en primera persona, y gira con perspectiva real hacia donde vaya el puntero, iluminando un foco de bordes suaves con un halo tenue alrededor. Un rayo atraviesa el aire desde la lente, el polvo flota en el haz y la página fuera de la luz queda oscura y desenfocada. La página de debajo nunca cambia: los enlaces y los botones siguen funcionando en la oscuridad.
Cómo funciona
Elige un estilo
Parte de Paseo nocturno, Luz cálida, Foco de escenario u otro estilo, y mueve el puntero sobre la vista previa para llevar la luz por la página.
Da forma a la luz
Elige la mano y la linterna (aluminio mecanizado, negro clásico o dibujada en plano), el tamaño y el borde del foco, el rayo, la bruma y el polvo, y cuánto se oscurece y se desenfoca el resto de la página. Dibujado con elige entre WebGL, el más ligero, y Three.js, un modelo 3D real.
Úsalo o expórtalo
Inicia sesión con una cuenta gratuita de UX Pilot para llevarlo al canvas de UX Pilot o exportarlo como HTML o PNG.
Qué puedes crear
Hero con las luces apagadas
Abre una página de lanzamiento o un teaser a oscuras y deja que los visitantes encuentren el titular con la linterna.
Easter eggs y detalles ocultos
Esconde un código, un descuento o un mensaje que solo aparece donde cae la luz.
Juegos, misterio y Halloween
Crea ambiente para un juego, un escape room, un podcast o una campaña de Halloween con una luz que se mueve con el visitante.
Un foco sobre una sola cosa
Usa Foco de escenario, sin mano, para poner una sola función, un producto o un retrato bajo un círculo de luz.
Preguntas frecuentes
¿Qué es un efecto linterna?
En una web, un efecto linterna oscurece la página e ilumina solo un círculo alrededor del puntero, como si el visitante la explorara con una linterna. Efecto linterna añade una linterna en la mano que gira hacia la luz, un rayo en el aire, polvo flotante y un desenfoque fuera del haz.
¿La linterna cambia mi página?
No. La oscuridad, el haz y la mano se dibujan sobre la página, que sigue igual debajo: el texto se puede seleccionar y los enlaces y los botones siguen funcionando. Con el movimiento reducido activado, la página se abre a oscuras con la luz encendida y nada se mueve solo.
¿Qué diferencia hay entre WebGL y Three.js?
Los dos dibujan la misma luz, el mismo polvo y la misma oscuridad. WebGL es el más ligero y dibuja la linterna en un shader. Three.js la dibuja como un modelo 3D real, con aletas, una empuñadura moleteada y un clip de bolsillo que captan la luz, y tarda más en cargar. Elige cualquiera de los dos en Dibujado con.
¿Puedo crear un efecto linterna sin código?
Sí. Ajústalo en tu navegador y después inicia sesión con una cuenta gratuita de UX Pilot para llevarlo al canvas de UX Pilot o exportarlo como HTML o PNG.