Animated Metrics Section with Karaoke Headline

<section class="relative bg-[#080808] text-white py-24 px-6 overflow-hidden">

  <div class="mx-auto max-w-5xl">

    <!-- Karaoke Styles -->
    <style>
      @keyframes karaoke {
        from {
          background-position: 100% 0;
        }

        to {
          background-position: 0 0;
        }
      }

      .karaoke-line {
        display: inline-block;
        background: linear-gradient(to right, #fff 50%, rgba(255, 255, 255, 0.2) 50%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        opacity: 0;
      }

      .karaoke-line.active {
        animation: karaoke 2.4s ease forwards;
        opacity: 1;
      }
    </style>

    <!-- HEADLINE -->
    <h2 id="karaoke" class="space-y-1 text-4xl md:text-6xl font-semibold leading-tight">
      <span class="karaoke-line">Flux is the native engine for the spatial web.</span><br />
      <span class="karaoke-line">Built for performance using WebGPU,</span><br />
      <span class="karaoke-line">enabling designers to construct fidelity-first</span><br />
      <span class="karaoke-line">experiences without writing a single line of shader code.</span>
    </h2>

    <!-- METRICS -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16">
      <div class="text-center">
        <div class="text-4xl font-bold counter" data-target="60">0</div>
        <div class="text-sm opacity-70">FPS</div>
      </div>

      <div class="text-center">
        <div class="text-4xl font-bold counter" data-target="12">0</div>
        <div class="text-sm opacity-70">MB</div>
      </div>

      <div class="text-center">
        <div class="text-4xl font-bold counter" data-target="4">0</div>
        <div class="text-sm opacity-70">ms</div>
      </div>

      <div class="text-center">
        <div class="text-4xl font-bold counter" data-target="42">0</div>
        <div class="text-sm opacity-70">%</div>
      </div>
    </div>

  </div>

  <!-- JS for sequencing + counting -->
  <script>
    // ----- Karaoke animation (line by line) -----
    const lines = document.querySelectorAll('.karaoke-line');

    function playKaraoke() {
      lines.forEach((line, i) => {
        setTimeout(() => {
          line.classList.add('active');
        }, i * 2600); // each line starts after previous (2.6s)
      });

      // Start counters after all lines finish
      setTimeout(startCounters, lines.length * 2600 + 500);
    }

    // ----- Number counter animation -----
    function startCounters() {
      document.querySelectorAll('.counter').forEach(counter => {
        const target = +counter.getAttribute('data-target');
        const duration = 1200;
        const start = 0;
        const startTime = performance.now();

        function update(now) {
          const progress = Math.min((now - startTime) / duration, 1);
          counter.textContent = Math.floor(progress * target);
          if (progress < 1) requestAnimationFrame(update);
        }

        requestAnimationFrame(update);
      });
    }

    // Run automatically on page load
    playKaraoke();
  </script>

</section>