<script>
  document.addEventListener(
    "DOMContentLoaded",
    function () {
      const divs = document.querySelectorAll(".grid > div")

      function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
      }

      const elements = Array.from(divs)
      const hiddenElements = []

      function step() {
        hiddenElements.forEach((e) => {
          if (Math.random() < 0.5) {
            e.style.opacity = 1
          }
        })

        const n = randomInt(5, 20)
        const itemsToHide = Array.from(Array(n).keys())

        itemsToHide.forEach((i) => {
          const index = randomInt(0, elements.length - 1)
          const item = elements[index]
          item.style.opacity = 0
          hiddenElements.push(item)
        })

        setTimeout(() => {
          requestAnimationFrame(step)
        }, 1000 / 1.1)
      }

      window.requestAnimationFrame(step)
    },
    false,
  )
</script>

<style>
  :root {
    --cell-size: 6px;
  }

  body {
    background: #2e4c43;
    padding: 2rem;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(6, var(--cell-size));
  }

  .grid > div {
    width: var(--cell-size);
    height: var(--cell-size);
    background: #e3f2f8;
    transition: opacity 0.4s;
  }
</style>

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>