Spacehey Present Code

<style>
  .present-container {
    padding: 0 5px;
  }

  .present-container p {
    font-size: 1.4rem !important;
  }

  .present {
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
    display: grid;
    grid-template-columns: repeat(6, calc(100% / 6));
    grid-template-rows: repeat(6, calc(100% / 6));
    overflow: hidden;
  }

  .present-content {
    grid-row: 1/7;
    grid-column: 1/7;
    padding: 10px;
    background-color: #212121;
    color: #fafafa;
    font-size: 0.875rem;
    overflow: auto;
    margin: 0;
  }

  @keyframes present {
    0% {
      opacity: 1;
      visibility: visible;
    }

    100% {
      opacity: 0;
      visibility: hidden;
    }
  }

  .present-pixel {
    background-color: white;
    background-image: url("https://cdn.usualegg.party/present/2.webp");
    background-size: calc(100% * 6) calc(100% * 6);
    background-repeat: no-repeat;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
    animation: present 50ms;
    animation-play-state: paused;
    animation-fill-mode: forwards;
  }

  .present-pixel:hover {
    animation-play-state: running;
  }

  @media (hover: none) {
    .present-pixel:has(~ .present-pixel:hover),
    .present-pixel:hover ~ .present-pixel {
      animation-play-state: running;
    }
  }
  .present-pixel:nth-child(1) {
    grid-row: 1;
    grid-column: 1;
    background-position: 0% 0%;
  }

  .present-pixel:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
    background-position: 20% 0%;
  }

  .present-pixel:nth-child(3) {
    grid-row: 1;
    grid-column: 3;
    background-position: 40% 0%;
  }

  .present-pixel:nth-child(4) {
    grid-row: 1;
    grid-column: 4;
    background-position: 60% 0%;
  }

  .present-pixel:nth-child(5) {
    grid-row: 1;
    grid-column: 5;
    background-position: 80% 0%;
  }

  .present-pixel:nth-child(6) {
    grid-row: 1;
    grid-column: 6;
    background-position: 100% 0%;
  }

  .present-pixel:nth-child(7) {
    grid-row: 2;
    grid-column: 1;
    background-position: 0% 20%;
  }

  .present-pixel:nth-child(8) {
    grid-row: 2;
    grid-column: 2;
    background-position: 20% 20%;
  }

  .present-pixel:nth-child(9) {
    grid-row: 2;
    grid-column: 3;
    background-position: 40% 20%;
  }

  .present-pixel:nth-child(10) {
    grid-row: 2;
    grid-column: 4;
    background-position: 60% 20%;
  }

  .present-pixel:nth-child(11) {
    grid-row: 2;
    grid-column: 5;
    background-position: 80% 20%;
  }

  .present-pixel:nth-child(12) {
    grid-row: 2;
    grid-column: 6;
    background-position: 100% 20%;
  }

  .present-pixel:nth-child(13) {
    grid-row: 3;
    grid-column: 1;
    background-position: 0% 40%;
  }

  .present-pixel:nth-child(14) {
    grid-row: 3;
    grid-column: 2;
    background-position: 20% 40%;
  }

  .present-pixel:nth-child(15) {
    grid-row: 3;
    grid-column: 3;
    background-position: 40% 40%;
  }

  .present-pixel:nth-child(16) {
    grid-row: 3;
    grid-column: 4;
    background-position: 60% 40%;
  }

  .present-pixel:nth-child(17) {
    grid-row: 3;
    grid-column: 5;
    background-position: 80% 40%;
  }

  .present-pixel:nth-child(18) {
    grid-row: 3;
    grid-column: 6;
    background-position: 100% 40%;
  }

  .present-pixel:nth-child(19) {
    grid-row: 4;
    grid-column: 1;
    background-position: 0% 60%;
  }

  .present-pixel:nth-child(20) {
    grid-row: 4;
    grid-column: 2;
    background-position: 20% 60%;
  }

  .present-pixel:nth-child(21) {
    grid-row: 4;
    grid-column: 3;
    background-position: 40% 60%;
  }

  .present-pixel:nth-child(22) {
    grid-row: 4;
    grid-column: 4;
    background-position: 60% 60%;
  }

  .present-pixel:nth-child(23) {
    grid-row: 4;
    grid-column: 5;
    background-position: 80% 60%;
  }

  .present-pixel:nth-child(24) {
    grid-row: 4;
    grid-column: 6;
    background-position: 100% 60%;
  }

  .present-pixel:nth-child(25) {
    grid-row: 5;
    grid-column: 1;
    background-position: 0% 80%;
  }

  .present-pixel:nth-child(26) {
    grid-row: 5;
    grid-column: 2;
    background-position: 20% 80%;
  }

  .present-pixel:nth-child(27) {
    grid-row: 5;
    grid-column: 3;
    background-position: 40% 80%;
  }

  .present-pixel:nth-child(28) {
    grid-row: 5;
    grid-column: 4;
    background-position: 60% 80%;
  }

  .present-pixel:nth-child(29) {
    grid-row: 5;
    grid-column: 5;
    background-position: 80% 80%;
  }

  .present-pixel:nth-child(30) {
    grid-row: 5;
    grid-column: 6;
    background-position: 100% 80%;
  }

  .present-pixel:nth-child(31) {
    grid-row: 6;
    grid-column: 1;
    background-position: 0% 100%;
  }

  .present-pixel:nth-child(32) {
    grid-row: 6;
    grid-column: 2;
    background-position: 20% 100%;
  }

  .present-pixel:nth-child(33) {
    grid-row: 6;
    grid-column: 3;
    background-position: 40% 100%;
  }

  .present-pixel:nth-child(34) {
    grid-row: 6;
    grid-column: 4;
    background-position: 60% 100%;
  }

  .present-pixel:nth-child(35) {
    grid-row: 6;
    grid-column: 5;
    background-position: 80% 100%;
  }

  .present-pixel:nth-child(36) {
    grid-row: 6;
    grid-column: 6;
    background-position: 100% 100%;
  }

  @media (hover: none) {
    .present-pixel:nth-child(1) {
      animation-delay: 10ms;
    }
    .present-pixel:nth-child(2) {
      animation-delay: 20ms;
    }
    .present-pixel:nth-child(3) {
      animation-delay: 30ms;
    }
    .present-pixel:nth-child(4) {
      animation-delay: 40ms;
    }
    .present-pixel:nth-child(5) {
      animation-delay: 50ms;
    }
    .present-pixel:nth-child(6) {
      animation-delay: 60ms;
    }
    .present-pixel:nth-child(7) {
      animation-delay: 200ms;
    }
    .present-pixel:nth-child(8) {
      animation-delay: 210ms;
    }
    .present-pixel:nth-child(9) {
      animation-delay: 220ms;
    }
    .present-pixel:nth-child(10) {
      animation-delay: 230ms;
    }
    .present-pixel:nth-child(11) {
      animation-delay: 240ms;
    }
    .present-pixel:nth-child(12) {
      animation-delay: 70ms;
    }
    .present-pixel:nth-child(13) {
      animation-delay: 190ms;
    }
    .present-pixel:nth-child(14) {
      animation-delay: 320ms;
    }
    .present-pixel:nth-child(15) {
      animation-delay: 330ms;
    }
    .present-pixel:nth-child(16) {
      animation-delay: 340ms;
    }
    .present-pixel:nth-child(17) {
      animation-delay: 250ms;
    }
    .present-pixel:nth-child(18) {
      animation-delay: 80ms;
    }
    .present-pixel:nth-child(19) {
      animation-delay: 180ms;
    }
    .present-pixel:nth-child(20) {
      animation-delay: 310ms;
    }
    .present-pixel:nth-child(21) {
      animation-delay: 360ms;
    }
    .present-pixel:nth-child(22) {
      animation-delay: 350ms;
    }
    .present-pixel:nth-child(23) {
      animation-delay: 260ms;
    }
    .present-pixel:nth-child(24) {
      animation-delay: 90ms;
    }
    .present-pixel:nth-child(25) {
      animation-delay: 170ms;
    }
    .present-pixel:nth-child(26) {
      animation-delay: 300ms;
    }
    .present-pixel:nth-child(27) {
      animation-delay: 290ms;
    }
    .present-pixel:nth-child(28) {
      animation-delay: 280ms;
    }
    .present-pixel:nth-child(29) {
      animation-delay: 270ms;
    }
    .present-pixel:nth-child(30) {
      animation-delay: 100ms;
    }
    .present-pixel:nth-child(31) {
      animation-delay: 160ms;
    }
    .present-pixel:nth-child(32) {
      animation-delay: 150ms;
    }
    .present-pixel:nth-child(33) {
      animation-delay: 140ms;
    }
    .present-pixel:nth-child(34) {
      animation-delay: 130ms;
    }
    .present-pixel:nth-child(35) {
      animation-delay: 120ms;
    }
    .present-pixel:nth-child(36) {
      animation-delay: 110ms;
    }
  }
</style>
<div class="present-container">
  <p>Just hover or tap over the image to reveal the code</p>
  <div class="present">
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <div class="present-pixel"></div>
    <pre class="present-content">{{ this code }}</pre>
  </div>
</div>