On scroll image move

<section class="overflow-hidden bg-white border-gray-100 border-t pt-24 pb-24 relative" id="portfolio-marquee">
  <div class="lg:px-8 max-w-7xl mr-auto mb-16 ml-auto pr-6 pl-6">
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-8">
      <div class="max-w-2xl">
        <div
          class="inline-flex items-center gap-2 text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full text-xs font-medium uppercase tracking-wide mb-6">
          Selected Works
        </div>
        <h2 class="text-4xl sm:text-5xl font-light tracking-tight text-gray-900 mb-4">
          Spaces designed <span class="font-semibold text-gray-400 italic font-playfair">to inspire</span>.
        </h2>
        <p class="text-lg text-gray-600 max-w-xl leading-relaxed">
          A curated selection of our residential and commercial projects, featuring award-winning minimal aesthetics and
          functional luxury.
        </p>
      </div>
      <div class="hidden md:block">
        <a href="#portfolio"
          class="group inline-flex items-center gap-2 text-sm font-semibold text-gray-900 border-b border-gray-200 pb-0.5 hover:border-gray-900 transition-colors">
          View Full Portfolio
          <i data-lucide="arrow-right" class="w-4 h-4 transform group-hover:translate-x-1 transition-transform"></i>
        </a>
      </div>
    </div>
  </div>

  <!-- Marquee Container -->
  <div class="flex flex-col gap-8 w-full relative gap-x-8 gap-y-8">

    <!-- Gradient Masks -->
    <div
      class="absolute left-0 top-0 bottom-0 w-20 sm:w-32 z-10 bg-gradient-to-r from-white to-transparent pointer-events-none">
    </div>
    <div
      class="absolute right-0 top-0 bottom-0 w-20 sm:w-32 z-10 bg-gradient-to-l from-white to-transparent pointer-events-none">
    </div>

    <!-- Row 1: Left Direction on Scroll -->
    <div class="overflow-hidden w-full">
      <div class="flex gap-6 will-change-transform w-max gap-x-6 gap-y-6 items-center"
        style="transform: translate3d(0,0,0)" id="marquee-row-1">
        <!-- Set 1 -->
        <div class="flex shrink-0 gap-6 gap-x-6 gap-y-6 items-center">
          <!-- Image 1 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&amp;q=80" alt="Modern Interior" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 2 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=800&amp;q=80" alt="Architecture Detail" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 3 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=800&amp;q=80" alt="Minimal Staircase" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 4 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=800&amp;q=80" alt="Luxury Living Room" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 5 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=800&amp;q=80" alt="Bright Bedroom" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
        </div>

        <!-- Duplicate Set 1 -->
        <div class="flex shrink-0 gap-6 items-center">
          <!-- Image 1 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=800&amp;q=80" alt="Modern Interior" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 2 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=800&amp;q=80" alt="Architecture Detail" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 3 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=800&amp;q=80" alt="Minimal Staircase" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 4 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=800&amp;q=80" alt="Luxury Living Room" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 5 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=800&amp;q=80" alt="Bright Bedroom" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Row 2: Right Direction on Scroll -->
    <div class="w-full overflow-hidden">
      <div id="marquee-row-2" class="flex gap-6 w-max items-center will-change-transform"
        style="transform: translate3d(-1000px,0,0);">
        <!-- Set 2 -->
        <div class="flex shrink-0 gap-6 items-center">
          <!-- Image 6 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4f9d?w=800&amp;q=80" alt="Minimal Grey Interior" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 7 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600607687644-c7171b42498f?w=800&amp;q=80" alt="Texture Detail" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 8 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1615529182904-14819c35db37?w=800&amp;q=80" alt="Dark Living Space" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 9 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=800&amp;q=80" alt="Marble Kitchen" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 10 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1598928506311-c55ded91a20c?w=800&amp;q=80" alt="Clean Workspace" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
        </div>

        <!-- Duplicate Set 2 -->
        <div class="flex shrink-0 gap-6 items-center">
          <!-- Image 6 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4f9d?w=800&amp;q=80" alt="Minimal Grey Interior" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 7 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600607687644-c7171b42498f?w=800&amp;q=80" alt="Texture Detail" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 8 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1615529182904-14819c35db37?w=800&amp;q=80" alt="Dark Living Space" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 9 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=800&amp;q=80" alt="Marble Kitchen" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <!-- Image 10 -->
          <div
            class="relative w-[300px] h-[200px] sm:w-[450px] sm:h-[300px] rounded-2xl overflow-hidden cursor-pointer transform transition-all duration-500 hover:scale-[1.02] hover:shadow-xl">
            <img src="https://images.unsplash.com/photo-1598928506311-c55ded91a20c?w=800&amp;q=80" alt="Clean Workspace" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/0 hover:bg-black/10 transition-colors duration-300"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script class="">
    (function() {
      // Elements
      const row1 = document.getElementById('marquee-row-1');
      const row2 = document.getElementById('marquee-row-2');
      
      // State
      let currentScroll = window.pageYOffset;
      let targetScroll = window.pageYOffset;
      
      // Configuration
      const ease = 0.08; // Lower = smoother/slower catchup
      const speed1 = -0.15; // Left speed
      const speed2 = 0.15;  // Right speed
      const row2Offset = -800; // Initial offset for row 2 to allow right movement
      
      // Linear interpolation
      function lerp(start, end, t) {
        return start * (1 - t) + end * t;
      }
      
      function update() {
        targetScroll = window.pageYOffset;
        currentScroll = lerp(currentScroll, targetScroll, ease);
        
        // Apply transforms
        if (row1) {
          row1.style.transform = `translate3d(${currentScroll * speed1}px, 0, 0)`;
        }
        if (row2) {
          // Row 2 starts shifted left (-800px) and moves right (+) as we scroll
          row2.style.transform = `translate3d(${row2Offset + (currentScroll * speed2)}px, 0, 0)`;
        }
        
        requestAnimationFrame(update);
      }
      
      // Start loop
      requestAnimationFrame(update);
    })();
  </script>
</section>