Flashlight effect: explore a dark page with a flashlight
Flashlight Effect turns the lights out on a web page and hands the visitor a flashlight. It is held low in a corner, as in a first-person game, and turns in true perspective toward wherever the pointer goes, lighting a soft-edged spot with a dim spill around it. A ray runs through the air from the lens, dust drifts through the beam, and the page outside the light falls dark and out of focus. The page underneath never changes: links and buttons keep working in the dark.
How it works
Pick a look
Start on Night walk, Warm torch, Stage spotlight or another look, and move the pointer over the preview to point the light around the page.
Shape the light
Choose the hand and the flashlight (machined aluminum, classic black or drawn flat), the size and edge of the spot, the ray, the haze and the dust, and how dark and blurred the rest of the page goes. Drawn with picks WebGL, the lighter one, or Three.js, a real 3D model.
Use it or export it
Sign in with a free UX Pilot account to put it on the UX Pilot canvas or export it as HTML or a PNG.
What you can make
Lights-out hero
Open a launch page or a teaser in the dark and let visitors find the headline with the flashlight.
Easter eggs and hidden details
Hide a code, a discount or a message that only shows up where the light falls.
Games, mystery and Halloween
Set the mood for a game, an escape room, a podcast or a Halloween campaign with a light that moves with the visitor.
A spotlight on one thing
Use Stage spotlight, with no hand, to put a single feature, a product or a portrait in a pool of light.
FAQ
What is a flashlight effect?
On a website, a flashlight effect darkens the page and lights only a circle around the pointer, as if the visitor were exploring it with a torch. Flashlight Effect adds a flashlight in hand that turns toward the light, a ray through the air, drifting dust and a blur outside the beam.
Does the flashlight change my page?
No. The dark, the beam and the hand are drawn over the page, which stays as it is underneath: text can still be selected and links and buttons still work. With reduced motion on, the page opens dark with the light on and nothing moves by itself.
What is the difference between WebGL and Three.js?
Both draw the same light, dust and dark. WebGL is the lighter one and draws the flashlight in a shader. Three.js draws it as a real 3D model, with fins, a knurled grip and a pocket clip that catch the light, and takes longer to load. Pick either under Drawn with.
Can I make a flashlight effect without code?
Yes. Tune it in your browser, then sign in with a free UX Pilot account to put it on the UX Pilot canvas or export it as HTML or a PNG.