Karaoke Word Highlight Span

<section class="sm:py-24 grid-corners border-white/5 border-t pt-24 pb-24 relative"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(6)">
  <div class="grid-corners-bottom"></div>
  <div class="sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 pl-4 relative">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
      <div class="animate-slide-left">
        <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight karaoke-container" data-karaoke-wrapped="true"
          data-karaoke-animated="true">
          <span class="karaoke-word"></span>
          <span class="karaoke-word" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(6) &gt; div:nth-of-type(2) &gt; div:nth-of-type(1) &gt; div:nth-of-type(1) &gt; h2:nth-of-type(1) &gt; span:nth-of-type(2)">Concept.</span>
          <span class="karaoke-word">Code.</span>
          <span class="karaoke-word">Deploy.</span>
          <span class="karaoke-word"></span>
        </h2>
        <p class="mt-3 text-neutral-300 karaoke-container" data-karaoke-wrapped="true" data-karaoke-animated="true">
          <span class="karaoke-word"></span>
          <span class="karaoke-word">Transform</span>
          <span class="karaoke-word">hours</span>
          <span class="karaoke-word">of</span>
          <span class="karaoke-word">manual</span>
          <span class="karaoke-word">work</span>
          <span class="karaoke-word">into</span>
          <span class="karaoke-word">minutes.</span>
          <span class="karaoke-word">Maintain</span>
          <span class="karaoke-word">full</span>
          <span class="karaoke-word">control</span>
          <span class="karaoke-word">with</span>
          <span class="karaoke-word">human</span>
          <span class="karaoke-word">oversight</span>
          <span class="karaoke-word">at</span>
          <span class="karaoke-word">every</span>
          <span class="karaoke-word">step.</span>
          <span class="karaoke-word"></span>
        </p>
        <ul class="mt-6 space-y-3 text-sm">
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="check-circle-2" class="lucide lucide-check-circle-2 mt-0.5 h-5 w-5 text-lime-300">
              <circle cx="12" cy="12" r="10" class=""></circle>
              <path d="m9 12 2 2 4-4" class=""></path>
            </svg>
            Battle-tested code and architecture patterns
          </li>
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="check-circle-2" class="lucide lucide-check-circle-2 mt-0.5 h-5 w-5 text-lime-300">
              <circle cx="12" cy="12" r="10" class=""></circle>
              <path d="m9 12 2 2 4-4" class=""></path>
            </svg>
            Version control with instant rollback capability
          </li>
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="check-circle-2" class="lucide lucide-check-circle-2 mt-0.5 h-5 w-5 text-lime-300">
              <circle cx="12" cy="12" r="10" class=""></circle>
              <path d="m9 12 2 2 4-4" class=""></path>
            </svg>
            Integrated testing and performance monitoring
          </li>
        </ul>
        <div class="mt-6 inline-flex gap-3">
          <a href="#pricing"
            class="inline-flex items-center gap-2 rounded-full border border-white/10 px-5 py-3 text-neutral-200 hover:bg-white/5 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="credit-card" class="lucide lucide-credit-card h-5 w-5">
              <rect width="20" height="14" x="2" y="5" rx="2" class=""></rect>
              <line x1="2" x2="22" y1="10" y2="10" class=""></line>
            </svg>
            View plans
          </a>
          <a href="#cta"
            class="inline-flex items-center gap-2 rounded-full bg-lime-400 px-5 py-3 text-neutral-950 font-medium hover:bg-lime-300 transition">
            Start building
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="chevron-right" class="lucide lucide-chevron-right h-4 w-4">
              <path d="m9 18 6-6-6-6" class=""></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="animate-slide-right relative overflow-hidden rounded-2xl ring-1 ring-white/10">
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c3691670-52f5-409f-a1aa-c66aabcff3e5_1600w.png" alt="Minimal workspace" class="h-full w-full object-cover">
        <div class="bg-gradient-to-tr from-black/50 via-transparent to-black/20 absolute top-0 right-0 bottom-0 left-0">
        </div>
        <div class="absolute bottom-4 left-4 right-4 rounded-xl bg-black/60 p-4 ring-1 ring-white/10">
          <div class="flex text-sm items-center justify-between">
            <div class="flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bot"
                class="lucide lucide-bot h-4 w-4 text-lime-300">
                <path d="M12 8V4H8" class=""></path>
                <rect width="16" height="12" x="4" y="8" rx="2" class=""></rect>
                <path d="M2 14h2" class=""></path>
                <path d="M20 14h2" class=""></path>
                <path d="M15 13v2" class=""></path>
                <path d="M9 13v2" class=""></path>
              </svg>
              <span class="font-medium">AI Assistant</span>
            </div>
            <span class="text-xs text-neutral-400">
                  24 tasks · 8 running
                </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Floating Glass Compass Orb -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none z-30"
      style="animation: compassFloat 8s ease-in-out infinite;">
      <div class="relative" style="width: 180px; height: 180px;">
        <!-- Outer glass ring -->
        <div class="absolute inset-0 rounded-full border-2 border-white/20 backdrop-blur-xl"
          style="background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03)); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 2px 8px rgba(255, 255, 255, 0.2); animation: compassRotate 20s linear infinite;">
          <!-- Glass highlight -->
          <div
            class="absolute inset-0 rounded-full bg-gradient-to-br from-white/30 via-transparent to-transparent opacity-60">
          </div>
        </div>

        <!-- Middle compass ring -->
        <div class="absolute inset-6 rounded-full border border-lime-300/30 backdrop-blur-md"
          style="background: rgba(163, 230, 53, 0.08); box-shadow: 0 0 20px rgba(163, 230, 53, 0.3), inset 0 1px 4px rgba(255, 255, 255, 0.15); animation: compassPulse 4s ease-in-out infinite;">
          <!-- Cardinal points -->
          <div class="absolute top-2 left-1/2 -translate-x-1/2 text-lime-300 text-xs font-semibold"
            style="text-shadow: 0 0 8px rgba(163, 230, 53, 0.8);">
            N
          </div>
          <div class="absolute bottom-2 left-1/2 -translate-x-1/2 text-white/40 text-xs">
            S
          </div>
          <div class="absolute right-2 top-1/2 -translate-y-1/2 text-white/40 text-xs">
            E
          </div>
          <div class="absolute left-2 top-1/2 -translate-y-1/2 text-white/40 text-xs">
            W
          </div>
        </div>

        <!-- Center orb -->
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="relative w-20 h-20 rounded-full border-2 border-lime-300/40 backdrop-blur-xl overflow-hidden"
            style="background: linear-gradient(135deg, rgba(163, 230, 53, 0.25) 0%, rgba(163, 230, 53, 0.08) 100%); box-shadow: 0 12px 40px rgba(163, 230, 53, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.3);">
            <!-- Glare effect -->
            <div class="absolute inset-0 bg-gradient-to-br from-white/40 via-transparent to-transparent"></div>

            <!-- Compass needle -->
            <div class="absolute inset-0 flex items-center justify-center"
              style="animation: compassNeedle 6s ease-in-out infinite;">
              <div class="relative w-1 h-12" style="transform-origin: center center;">
                <!-- North needle (red) -->
                <div class="absolute top-0 left-0 w-full h-6 bg-gradient-to-b from-lime-400 to-lime-300"
                  style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%); filter: drop-shadow(0 2px 4px rgba(163, 230, 53, 0.6));">
                </div>
                <!-- South needle (white) -->
                <div class="absolute bottom-0 left-0 w-full h-6 bg-gradient-to-t from-white/60 to-white/30"
                  style="clip-path: polygon(0% 0%, 100% 0%, 50% 100%);"></div>
                <!-- Center pin -->
                <div
                  class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-white ring-1 ring-lime-300/50"
                  style="box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);"></div>
              </div>
            </div>

            <!-- Center icon -->
            <div class="absolute inset-0 flex items-center justify-center opacity-30">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="text-lime-300">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <path d="m16.2 7.8-2 6.3-6.4 2.1 2-6.3z" class=""></path>
              </svg>
            </div>
          </div>
        </div>

        <!-- Orbiting particles -->
        <div class="absolute w-2 h-2 rounded-full bg-lime-400/80 backdrop-blur-sm ring-1 ring-lime-300/50"
          style="top: 15px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 10px rgba(163, 230, 53, 0.8); animation: orbitCompass1 10s linear infinite;">
        </div>
        <div class="absolute w-1.5 h-1.5 rounded-full bg-white/60 backdrop-blur-sm ring-1 ring-white/40"
          style="top: 50%; right: 15px; transform: translateY(-50%); box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); animation: orbitCompass2 12s linear infinite;">
        </div>
        <div class="absolute w-2 h-2 rounded-full bg-lime-300/60 backdrop-blur-sm ring-1 ring-lime-300/40"
          style="bottom: 15px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 10px rgba(163, 230, 53, 0.6); animation: orbitCompass3 14s linear infinite;">
        </div>
      </div>

      <!-- Info label -->
      <div
        class="absolute -bottom-16 left-1/2 -translate-x-1/2 rounded-xl border border-white/10 backdrop-blur-md px-4 py-2 text-xs whitespace-nowrap"
        style="background: rgba(0, 0, 0, 0.4); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);">
        <div class="flex items-center gap-2">
          <div class="w-1.5 h-1.5 rounded-full bg-lime-400" style="animation: pulse 2s ease-in-out infinite;"></div>
          <span class="text-neutral-300 font-medium">
                Navigation Active
              </span>
        </div>
      </div>
    </div>

    <style>
      @keyframes compassFloat {

        0%,
        100% {
          transform: translate(-50%, -50%) translateY(0px);
        }

        50% {
          transform: translate(-50%, -50%) translateY(-20px);
        }
      }

      @keyframes compassRotate {
        from {
          transform: rotate(0deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      @keyframes compassPulse {

        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }

        50% {
          opacity: 0.8;
          transform: scale(1.02);
        }
      }

      @keyframes compassNeedle {

        0%,
        100% {
          transform: rotate(0deg);
        }

        25% {
          transform: rotate(15deg);
        }

        75% {
          transform: rotate(-15deg);
        }
      }

      @keyframes orbitCompass1 {
        0% {
          transform: translateX(-50%) rotate(0deg) translateX(90px) rotate(0deg);
        }

        100% {
          transform: translateX(-50%) rotate(360deg) translateX(90px) rotate(-360deg);
        }
      }

      @keyframes orbitCompass2 {
        0% {
          transform: translateY(-50%) rotate(120deg) translateX(90px) rotate(-120deg);
        }

        100% {
          transform: translateY(-50%) rotate(480deg) translateX(90px) rotate(-480deg);
        }
      }

      @keyframes orbitCompass3 {
        0% {
          transform: translateX(-50%) rotate(240deg) translateX(90px) rotate(-240deg);
        }

        100% {
          transform: translateX(-50%) rotate(600deg) translateX(90px) rotate(-600deg);
        }
      }
    </style>
  </div>
</section>