DEV Community

loading...
Cover image for Flashlight Website

Flashlight Website

madsstoumann profile image Mads Stoumann ・1 min read

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%));
}
Enter fullscreen mode Exit fullscreen mode

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)+'%');
}
Enter fullscreen mode Exit fullscreen mode

Thanks for reading!

Discussion (4)

pic
Editor guide
Collapse
inhuofficial profile image
InHuOfficial

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!

Collapse
madsstoumann profile image
Mads Stoumann Author

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 ;-)

Collapse
afif profile image
Collapse
madsstoumann profile image