Animated AI Code Generation Card

<div class="glass rounded-2xl mb-8 pt-3 pr-3 pb-3 pl-3"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(2) &gt; div:nth-of-type(2) &gt; div:nth-of-type(1) &gt; div:nth-of-type(2) &gt; div:nth-of-type(3) &gt; main:nth-of-type(1) &gt; div:nth-of-type(2)">
  <div
    class="aspect-video rounded-lg bg-gradient-to-br from-lime-400/30 via-lime-400/10 to-neutral-900 flex items-center justify-center overflow-hidden relative">
    <div class="absolute inset-0">
      <div class="absolute top-4 left-4 w-24 h-16 glass rounded-lg float"></div>
      <div class="absolute top-4 right-4 w-20 h-20 glass rounded-full" style="animation-delay: 0.5s;"></div>
      <div class="absolute bottom-4 left-1/2 -translate-x-1/2 w-32 h-12 glass rounded-lg float"
        style="animation-delay: 1s;"></div>
      <div
        class="absolute top-1/2 left-1/4 -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-lime-400/40 blur-xl float"
        style="animation-delay: 0.3s; box-shadow: 0 0 40px rgba(163, 230, 53, 0.6);"></div>
    </div>
    <div class="z-10 text-center relative">
      <svg viewBox="0 0 200 200" class="w-32 h-32 mx-auto mb-3">
        <defs class=""></defs>

        <!-- Outer rotating ring -->
        <circle cx="100" cy="100" r="80" fill="none" stroke="rgba(163,230,53,0.2)" stroke-width="2" class=""></circle>

        <!-- Middle pulsing ring -->
        <circle cx="100" cy="100" r="60" fill="none" stroke="url(#pulseGradient)" stroke-width="3" class="">
          <animate attributeName="r" values="60;65;60" dur="2s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="stroke-width" values="3;1.5;3" dur="2s" repeatCount="indefinite" class=""></animate>
        </circle>

        <!-- Inner core -->
        <circle cx="100" cy="100" r="40" fill="rgba(163,230,53,0.2)" stroke="rgba(163,230,53,0.6)" stroke-width="2"
          class="">
          <animate attributeName="r" values="40;42;40" dur="1.5s" repeatCount="indefinite" class=""></animate>
        </circle>

        <!-- Orbiting particles -->
        <circle cx="180" cy="100" r="4" fill="rgba(163,230,53,0.9)" class="">
          <animate attributeName="opacity" values="0.9;0.3;0.9" dur="2s" repeatCount="indefinite" class=""></animate>
        </circle>

        <circle cx="140" cy="50" r="3" fill="rgba(163,230,53,0.7)" class="">
          <animate attributeName="opacity" values="0.7;0.2;0.7" dur="2.5s" repeatCount="indefinite" class=""></animate>
        </circle>

        <circle cx="60" cy="50" r="3.5" fill="rgba(163,230,53,0.8)" class="">
          <animate attributeName="opacity" values="0.8;0.3;0.8" dur="3s" repeatCount="indefinite" class=""></animate>
        </circle>

        <!-- Energy waves emanating from center -->
        <circle cx="100" cy="100" r="20" fill="none" stroke="rgba(163,230,53,0.6)" stroke-width="2" opacity="0"
          class="">
          <animate attributeName="r" values="20;80;80" dur="3s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="opacity" values="0;0.8;0" dur="3s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="stroke-width" values="2;0.5;0.5" dur="3s" repeatCount="indefinite" class=""></animate>
        </circle>

        <circle cx="100" cy="100" r="20" fill="none" stroke="rgba(163,230,53,0.6)" stroke-width="2" opacity="0"
          class="">
          <animate attributeName="r" values="20;80;80" dur="3s" begin="1s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="opacity" values="0;0.8;0" dur="3s" begin="1s" repeatCount="indefinite" class="">
          </animate>
          <animate attributeName="stroke-width" values="2;0.5;0.5" dur="3s" begin="1s" repeatCount="indefinite"
            class=""></animate>
        </circle>

        <circle cx="100" cy="100" r="20" fill="none" stroke="rgba(163,230,53,0.6)" stroke-width="2" opacity="0"
          class="">
          <animate attributeName="r" values="20;80;80" dur="3s" begin="2s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="opacity" values="0;0.8;0" dur="3s" begin="2s" repeatCount="indefinite" class="">
          </animate>
          <animate attributeName="stroke-width" values="2;0.5;0.5" dur="3s" begin="2s" repeatCount="indefinite"
            class=""></animate>
        </circle>

        <!-- Center icon -->
        <path d="M100,85 L100,115 M85,100 L115,100" stroke="rgba(163,230,53,1)" stroke-width="3" stroke-linecap="round"
          class="">
          <animate attributeName="opacity" values="1;0.5;1" dur="1.5s" repeatCount="indefinite" class=""></animate>
        </path>
        <circle cx="100" cy="100" r="8" fill="rgba(163,230,53,0.3)" stroke="rgba(163,230,53,0.8)" stroke-width="2"
          class="">
          <animate attributeName="r" values="8;10;8" dur="1.5s" repeatCount="indefinite" class=""></animate>
        </circle>
      </svg>
      <div class="text-xs text-lime-300 font-medium">
        AI Code Generation
      </div>
    </div>
  </div>
</div>