Hyper Speed Tunnel Hero (Extended Narrative)

<section class="w-full h-screen bg-black overflow-hidden relative">

  <canvas id="tunnel"></canvas>

  <!-- CONTENT -->
  <div class="absolute inset-0 flex flex-col items-center justify-center text-center px-6 pointer-events-none">

    <div class="max-w-3xl space-y-6">

      <p class="text-xs tracking-[0.3em] text-white/40">
        SYSTEM INITIALIZED
      </p>

      <h1 class="text-white text-4xl md:text-6xl font-semibold tracking-tight leading-tight">
        Enter Hyper Speed
        <span class="block text-transparent bg-clip-text bg-gradient-to-r from-cyan-300 to-white">
          Beyond Interface Limits
        </span>
      </h1>

      <p class="text-white/70 text-sm md:text-lg max-w-xl mx-auto">
        Experience a new dimension of interaction where motion, depth, and speed converge into a seamless digital flow.
      </p>

      <p class="text-white/50 text-xs md:text-sm max-w-lg mx-auto">
        This is not just animation — it’s a perception shift. Designed for high-impact landing pages, futuristic systems, and immersive product storytelling.
      </p>

      <div class="pt-4">
        <button class="px-6 py-3 bg-white text-black rounded-xl hover:scale-105 transition">
          Launch Experience →
        </button>
      </div>

    </div>

  </div>

  <script>
    const canvas = document.getElementById("tunnel");
    const ctx = canvas.getContext("2d");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let centerX = canvas.width / 2;
    let centerY = canvas.height / 2;

    let targetX = centerX;
    let targetY = centerY;

    const stars = [];

    // Starfield technique uses canvas + requestAnimationFrame for smooth motion :contentReference[oaicite:0]{index=0}
    for (let i = 0; i < 400; i++) {
      stars.push({
        x: (Math.random() - 0.5) * canvas.width,
        y: (Math.random() - 0.5) * canvas.height,
        z: Math.random() * canvas.width
      });
    }

    window.addEventListener("mousemove", (e) => {
      targetX = e.clientX;
      targetY = e.clientY;
    });

    function animate() {
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      centerX += (targetX - centerX) * 0.05;
      centerY += (targetY - centerY) * 0.05;

      stars.forEach(star => {

        star.z -= 8;

        if (star.z <= 0) {
          star.z = canvas.width;
        }

        const k = 128 / star.z;

        const x = star.x * k + centerX;
        const y = star.y * k + centerY;

        const size = (1 - star.z / canvas.width) * 3;

        const px = star.x * (128 / (star.z + 8)) + centerX;
        const py = star.y * (128 / (star.z + 8)) + centerY;

        ctx.strokeStyle = "rgba(255,255,255,0.8)";
        ctx.lineWidth = size;

        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(x, y);
        ctx.stroke();

      });

      requestAnimationFrame(animate);
    }

    animate();

    window.addEventListener("resize", () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });
  </script>

</section>