Animated Orbiting Thumbnail Carousel

<div class="md:h-64 w-full h-56 max-w-5xl mr-auto ml-auto relative"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; main:nth-of-type(1) &gt; section:nth-of-type(2) &gt; div:nth-of-type(2) &gt; div:nth-of-type(4) &gt; div:nth-of-type(1)"
  id="feature-orbit">
  <!-- Background glow -->
  <div
    class="pointer-events-none absolute left-1/2 top-1/2 -z-10 h-[420px] w-[1100px] -translate-x-1/2 -translate-y-1/2 rounded-[1200px] blur-2xl"
    style="background: radial-gradient(60% 100% at 50% 50%, rgba(124, 58, 237, 0.35) 0%, rgba(59, 130, 246, 0.18) 50%, rgba(0,0,0,0) 72%); mix-blend: screen;">
  </div>

  <!-- Orbit nodes -->
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 195.593px; top: 220.102px; transform: translate(-50%, -50%) rotate(-7.91017deg) scale(0.991955); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.36; z-index: 107; filter: none;">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/614b6cfb-1fd2-4c28-8aba-f7b691c905fd_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 194.937px; top: 190.957px; transform: translate(-50%, -50%) rotate(-7.92656deg) scale(0.969185); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 93; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0e8233e6-2828-4a6d-a82d-9984eb89f257_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="md:w-20 md:h-20 overflow-hidden w-16 h-16 ring-white/10 ring-1 rounded-xl absolute shadow-lg"
    style="left: 219.968px; top: 162.933px; transform: translate(-50%, -50%) rotate(-7.3008deg) scale(0.947292); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 80; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0794dc4e-47ff-4812-91f3-3095646debe3_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 268.658px; top: 138.301px; transform: translate(-50%, -50%) rotate(-6.08356deg) scale(0.928048); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 68; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/716d4c2c-28c6-4040-9bc5-bce9eadbf299_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 337.061px; top: 119.056px; transform: translate(-50%, -50%) rotate(-4.37347deg) scale(0.913013); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 58; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/05195a8d-eb48-4912-b6c2-91d8ec5a7b7c_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 419.637px; top: 106.758px; transform: translate(-50%, -50%) rotate(-2.30907deg) scale(0.903405); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 52; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/614b6cfb-1fd2-4c28-8aba-f7b691c905fd_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 509.696px; top: 102.403px; transform: translate(-50%, -50%) rotate(-0.0576022deg) scale(0.900002); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 50; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0415ae4b-2c65-41d6-92b9-3b67dc5d66ab_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 599.941px; top: 106.343px; transform: translate(-50%, -50%) rotate(2.19853deg) scale(0.90308); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 52; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/346c8983-c047-4169-902a-df1305819be6_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 683.062px; top: 118.259px; transform: translate(-50%, -50%) rotate(4.27656deg) scale(0.91239); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 58; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2af3cf9a-d369-4b3a-a069-0929f336cc04_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 752.325px; top: 137.187px; transform: translate(-50%, -50%) rotate(6.00812deg) scale(0.927177); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 67; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/adb083e8-58e1-46e8-9937-dfa98eac9c6b_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 802.118px; top: 161.592px; transform: translate(-50%, -50%) rotate(7.25294deg) scale(0.946244); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 79; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/890b16bf-eac1-46aa-b8b5-b74ae7a0d51a_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>
  <div data-orbit-node=""
    class="absolute w-16 h-16 md:w-20 md:h-20 rounded-xl overflow-hidden ring-1 ring-white/10 shadow-lg"
    style="left: 828.407px; top: 189.498px; transform: translate(-50%, -50%) rotate(7.91017deg) scale(0.968045); background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); opacity: 0.25; z-index: 93; filter: blur(0.5px);">
    <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7dfd4bd5-b8bf-4782-b24e-a6705213b9a5_3840w.jpg" alt="" class="w-full h-full object-cover">
  </div>

  <script>
    (function(){
      const wrap = document.getElementById('feature-orbit');
      if (!wrap) return;
      const nodes = Array.from(wrap.querySelectorAll('[data-orbit-node]'));

      function layout(t = 0){
        const w = wrap.clientWidth || 800;
        const h = wrap.clientHeight || 240;
        const cx = w / 2;
        const cy = h * 0.80;
        const rx = Math.min(320, Math.max(180, w * 0.32));
        const ry = Math.min(140, Math.max(90, h * 0.40));
        const step = Math.PI / (nodes.length - 1);
        nodes.forEach((el, i) => {
          const a = -Math.PI - 0.15 + i * step + t;
          const x = cx + rx * Math.cos(a);
          const y = cy + ry * Math.sin(a);
          const depth = Math.sin(a);
          const scale = 0.9 + (depth + 1) * 0.08;
          
          let opacity;
          if (depth < -0.7) {
            opacity = 0;
          } else if (depth < 0) {
            opacity = (depth + 0.7) / 0.7 * 0.5;
          } else {
            opacity = 0.5 + depth * 0.5;
          }
          
          let blur;
          if (depth < -0.5) {
            blur = 8 + Math.abs(depth) * 8;
          } else if (depth < 0) {
            blur = 2 + Math.abs(depth) * 6;
          } else {
            blur = 0;
          }

          el.style.left = x + 'px';
          el.style.top = y + 'px';
          el.style.transform = 'translate(-50%,-50%) rotate(' + (Math.cos(a) * 8) + 'deg) scale(' + scale + ')';
          el.style.opacity = opacity.toFixed(3);
          el.style.zIndex = (100 + Math.round(depth * 50)).toString();
          el.style.filter = blur > 0 ? 'blur(' + blur.toFixed(1) + 'px)' : 'none';
        });
      }

      let rafId, start = performance.now();
      function animate(now){
        const elapsed = now - start;
        const t = (elapsed / 8000) % (Math.PI * 2);
        layout(t);
        rafId = requestAnimationFrame(animate);
      }

      const io = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting){
            start = performance.now();
            cancelAnimationFrame(rafId);
            rafId = requestAnimationFrame(animate);
          } else {
            cancelAnimationFrame(rafId);
          }
        });
      }, { threshold: 0.2 });

      layout(0);
      io.observe(wrap);
      window.addEventListener('resize', () => layout());
    })();
  </script>
</div>