SWARM - RETROSCOPIC CRT SHADER SOURCE CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swarm</title>
  <style>
    body, html {
      margin: 0;
      width: 100%;
      height: 100%;
      background: #000;
      overflow: hidden;
    }

    #app {
      width: 100%;
      height: 100%;
      overflow: hidden;
      touch-action: pan-up;
      position: fixed;
      inset: 0;
      filter: grayscale(1) sepia(1) hue-rotate(80deg) saturate(5) brightness(1.15) contrast(1.2);
      z-index: 2;
    }

    #app canvas {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* Retroscopic Overlay */
    #scope {
      position: fixed;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      display: block;
    }
    #scope>div {
      position: absolute;
      inset: 0;
    }
    #scope .glow {
      background: radial-gradient(circle at 50% 46%, rgba(30, 255, 130, .08), rgba(0, 0, 0, 0) 62%);
      animation: nvflick 3.6s steps(24) infinite;
    }
    #scope .scan {
      background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 25, 8, .45) 2px 3px);
      animation: nvscan 7s linear infinite;
    }
    #scope .vig {
      box-shadow: inset 0 0 200px 50px rgba(0, 0, 0, .8);
    }
    #scope .mask {
      background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, .5) 72%, rgba(0, 0, 0, .94) 100%);
    }
    @keyframes nvscan {
      from { background-position: 0 0; }
      to { background-position: 0 240px; }
    }
    @keyframes nvflick {
      0%, 100% { opacity: .55; }
      40% { opacity: .9; }
      62% { opacity: .4; }
      80% { opacity: .75; }
    }
  </style>
</head>
<body>
  <div id="scope">
    <div class="glow"></div>
    <div class="scan"></div>
    <div class="vig"></div>
    <div class="mask"></div>
  </div>
  <div id="app"></div>

  <script type="module">
    import { swarmBackground } from 'https://unpkg.com/threejs-toys@0.0.8/build/threejs-toys.module.cdn.min.js';

    const bg = swarmBackground({
      el: document.getElementById('app'),
      eventsEl: document.body,
      gpgpuSize: 256,
      color: [Math.random() * 0xffffff, Math.random() * 0xffffff],
      geometry: 'default'
    });

    bg.three.camera.position.set(0, 0, 200);

    document.body.addEventListener('click', () => {
      bg.setColors([Math.random() * 0xffffff, Math.random() * 0xffffff]);
    });
  </script>
</body>
</html>