Apple-Style Scroll Storytelling Hero

<section class="w-full bg-black text-white">

  <!-- SCROLL CONTAINER -->
  <div class="h-[300vh] relative">

    <!-- STICKY FRAME -->
    <div class="sticky top-0 h-screen flex items-center justify-center overflow-hidden">

      <!-- Background -->
      <div class="absolute inset-0">
        <img 
          src="https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1600&auto=format&fit=crop"
          class="w-full h-full object-cover opacity-40 transition duration-700"
          id="bgImage"
        />
        <div class="absolute inset-0 bg-gradient-to-b from-black/60 via-black/80 to-black"></div>
      </div>

      <!-- Content -->
      <div class="relative z-10 text-center px-6 max-w-3xl">

        <h1 id="title" class="text-4xl md:text-6xl font-semibold leading-tight transition-all duration-500">
          Enter the Experience
        </h1>

        <p id="desc" class="mt-6 text-white/70 text-lg transition-all duration-500">
          Scroll to begin the journey.
        </p>

      </div>

    </div>

  </div>

  <script>
    const title = document.getElementById("title");
    const desc = document.getElementById("desc");

    window.addEventListener("scroll", () => {

      const scroll = window.scrollY;
      const max = document.body.scrollHeight - window.innerHeight;
      const progress = scroll / max;

      // 👉 Apple-style storytelling logic
      // Scroll drives state (this is key concept) :contentReference[oaicite:0]{index=0}

      if (progress < 0.25) {
        title.innerText = "Enter the Experience";
        desc.innerText = "Scroll to begin the journey.";
      } 
      else if (progress < 0.5) {
        title.innerText = "Speed becomes perception";
        desc.innerText = "Motion is no longer animation — it's interaction.";
      } 
      else if (progress < 0.75) {
        title.innerText = "Everything responds to you";
        desc.innerText = "Every scroll reveals a new layer of meaning.";
      } 
      else {
        title.innerText = "This is scroll storytelling";
        desc.innerText = "Not just UI. A guided experience.";
      }

      // subtle animation
      title.style.opacity = 1 - Math.abs(0.5 - progress);
      desc.style.opacity = 1 - Math.abs(0.5 - progress);

    });
  </script>

</section>