In “How To Avoid a Climate Disaster”, Bill Gates writes about kids, who're doing their homework by candle- or flashlight, either because of unstable electricity — or no electricity at all.
Imagine if you had to browse the web in a similar way — pretty annoying.
To show you just how annoying that is, I've made a fun little "flashlight-only"-website here (click on the flash and move it around):
We need to reduce carbon emissions and upgrade the living conditions for millions of people, so nobody have to study by candelight.
Quite a challenge.
How I Did It
I looked into ways of “cutting a hole” using clipping or masking, but ended up with something much simpler: a radial gradient.
body {
background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 224, 0.77) var(--w), rgba(0, 0, 0, 0.97) calc(var(--w) + 1%));
}
The --w is the width of the inner, semi-transparent ring, while the --x and --y are coordinates, set by JavaScript:
function move(event) {
document.body.style.setProperty('--x', parseInt((event.pageX / document.documentElement.offsetWidth) * 100, 10)+'%');
document.body.style.setProperty('--y', parseInt((event.pageY / document.documentElement.offsetHeight) * 100, 10)+'%');
}
Thanks for reading!
Top comments (4)
Super simple but effective, ❤
One minor amendment to the article (minor suggestion) , tell people you have to click to move the "flashlight" - I thought the thing was broken until I opened the codepen and saw it only responded to pointerdown etc.!
Future article idea - Make it follow a mouse if a mouse is being used but keep the original functionality for touch device users.
Additionally (ok I am turning this into a full project 🤣), moving the flashlight with the keyboard would be great from an accessibility perspective, plus that would be super interesting to see how you would control it without interfering with a normal screen reader's controls!
Haha, I've already been asked if I can add options to change the size and shape of the light! It was never meant to be a project, just a fun little snippet ;-)
similar idea: stackoverflow.com/a/54724419/8620333
Nice!