"fun" way to annoy your coworkers AND get them to care about performance (block all user interaction if FPS < 50)

fps-block.js

(() => {
  const fpsDiv = document.createElement('div');
  fpsDiv.style.position = 'fixed';
  fpsDiv.style.bottom = '0px';
  fpsDiv.style.right = '0px';
  fpsDiv.style.fontSize = '12px';
  fpsDiv.style.backgroundColor = 'lightgreen';
  fpsDiv.style.padding = '5px';
  fpsDiv.style.zIndex = '9999';
  fpsDiv.style.width = '50px';
  fpsDiv.style.textAlign = 'center';
  document.body.appendChild(fpsDiv);

  let frameCount = 0;
  let lastUpdate = performance.now();
  let fps = 0;

  function update() {
    const now = performance.now();
    frameCount++;

    if (now - lastUpdate >= 1000) {
      fps = Math.round((frameCount * 1000) / (now - lastUpdate));
      lastUpdate = now;
      frameCount = 0;

      fpsDiv.textContent = `${fps} fps`;

      if (fps < 50) {
        fpsDiv.style.position = 'fixed';
        fpsDiv.style.top = '50%';
        fpsDiv.style.left = '50%';
        fpsDiv.style.transform = 'translate(-50%, -50%)';
        fpsDiv.style.fontSize = '24px';
        fpsDiv.style.backgroundColor = 'red';
        fpsDiv.style.zIndex = '99999999';
        fpsDiv.style.width = 'auto';
        fpsDiv.style.padding = '10px';
      } else {
        fpsDiv.style.position = 'fixed';
        fpsDiv.style.bottom = '0px';
        fpsDiv.style.right = '0px';
        fpsDiv.style.fontSize = '12px';
        fpsDiv.style.backgroundColor = 'lightgreen';
        fpsDiv.style.width = '50px';
        fpsDiv.style.padding = '5px';
        fpsDiv.style.zIndex = '9999';
        fpsDiv.style.transform = '';
        fpsDiv.style.top = '';
        fpsDiv.style.left = '';
      }
    }

    requestAnimationFrame(update);
  }

  requestAnimationFrame(update);
  
  console.log("Want to optimize your FPS? Check out https://react-scan.com")
})();