screensaver

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Screensaver</title>
  </head>

  <body>
    <div id="screensaver" class="screensaver">
      <div class="screensaver__row">
        <div class="screen-spacer"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="screen-spacer"></div>
        <div class="star"></div>
        <div class="star"></div>
      </div>
      <div class="screensaver__row">
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
        <div class="star"></div>
      </div>
      <div class="screensaver__row">
        <div class="star"></div>
        <div class="star star-bottom"></div>
        <div class="screen-spacer"></div>
        <div class="star"></div>
        <div class="star star-bottom"></div>
        <div class="screen-spacer"></div>
      </div>
    </div>
    <h1>stop mouse movement for 2 seconds to see the screensaver</h1>
  </body>

</html>

CSS

.screensaver {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;
      z-index: 99;
      pointer-events: none;
      visibility: hidden;
      background-color: #f6f8ea;
    }

    .screensaver__row {
      display: flex;
      display: -ms-flexbox;
      flex-wrap: nowrap;
      justify-content: center;
    }

    .screensaver__row>* {
      padding-left: 10px;
      padding-right: 10px;
      transition: opacity 3s ease-in-out;
    }

    .screensaver.is--active {
      visibility: visible;
    }

    .screen-spacer {
      flex-basis: 16.6%;
    }

    .star-big {
      flex-basis: 25%;
    }

    .star-big:nth-child(2n),
    .star-big:nth-child(4n) {
      margin-top: 84px;
    }

    .star-bottom {
      margin-top: auto;
    }

    .star {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-left: 100px solid red;
      border-bottom: 50px solid transparent;
      opacity: 0;
    }

    .star.is--visible {
      opacity: 1;
    }

JavaScript

const idletime = 2;
const screenSaver = document.getElementById("screensaver");
const stars = Array.from(document.querySelectorAll(".star"));
const shuffledStars = stars
  .map((value) => ({
    value,
    sort: Math.random()
  }))
  .sort((a, b) => a.sort - b.sort)
  .map(({
    value
  }) => value);

let mousetimeout;
let screensaverActive = false;

window.addEventListener("mousemove", (e) => {
  clearTimeout(mousetimeout);
  if (screensaverActive) {
    stopScreensaver();
  } else {
    mousetimeout = setTimeout(function() {
      startScreensaver();
    }, 1000 * idletime);
  }
});

function stopScreensaver() {
  screensaverActive = false;
  shuffledStars.forEach((star) => {
    star.classList.remove("is--visible");
  });
  screenSaver.classList.remove("is--active");
}

function startScreensaver() {
  screensaverActive = true;
  screenSaver.classList.add("is--active");
  for (let index = 0; index < shuffledStars.length; index++) {
    if (screensaverActive) {
      setTimeout(function() {
        shuffledStars[index].classList.add("is--visible");
      }, 2000 * index);
    } else {
      break;
    }
  }
}