Animated Orbiting API Stats Card

<div
  class="max-w-md overflow-hidden animate-fade-in-up delay-700 bg-black/30 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 relative">
  <div class="pointer-events-none absolute inset-px rounded-2xl ring-1 ring-inset ring-white/10"></div>
  <div class="absolute -top-10 left-1/2 h-56 w-56 -translate-x-1/2 rounded-full bg-sky-500/20 blur-3xl"></div>

  <!-- Icon Grid -->
  <div class="grid grid-cols-3 gap-3 opacity-60">
    <div
      class="aspect-square rounded-lg border border-white/10 bg-white/[0.02] flex items-center justify-center animate-pulse"
      style="animation-delay: 0s; animation-duration: 2s;">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="h-5 w-5 text-sky-400/70">
        <path
          d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
          class=""></path>
      </svg>
    </div>
    <div
      class="aspect-square rounded-lg border border-white/10 bg-white/[0.02] flex items-center justify-center animate-pulse"
      style="animation-delay: 0.3s; animation-duration: 2s;">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="h-5 w-5 text-sky-400/70">
        <path d="M20 7h-9" class=""></path>
        <path d="M14 17H5" class=""></path>
        <circle cx="17" cy="17" r="3" class=""></circle>
        <circle cx="7" cy="7" r="3" class=""></circle>
      </svg>
    </div>
    <div
      class="aspect-square rounded-lg border border-white/10 bg-white/[0.02] flex items-center justify-center animate-pulse"
      style="animation-delay: 0.6s; animation-duration: 2s;">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="h-5 w-5 text-sky-400/70">
        <path d="M12 2v20M2 12h20" class=""></path>
      </svg>
    </div>
  </div>

  <!-- Enhanced Database Schema Visualization -->
  <div class="relative mt-6 flex items-center justify-center">
    <div class="relative h-48 w-full">
      <!-- Central Hub -->
      <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
        <div
          class="h-20 w-20 rounded-full border-2 border-sky-400/50 bg-gradient-to-b from-sky-500/20 to-sky-500/5 flex items-center justify-center shadow-[0_0_40px_-10px_rgba(56,189,248,0.6)]"
          style="animation: pulse-glow 3s ease-in-out infinite;">
          <div class="text-center">
            <div class="text-2xl font-semibold tracking-tight text-sky-100">
              500+
            </div>
            <div class="text-[10px] text-sky-400">APIs</div>
          </div>
        </div>
      </div>

      <!-- Orbiting Nodes -->
      <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" style="width: 180px; height: 180px;">
        <!-- Node 1 -->
        <div class="absolute left-1/2 top-1/2 -ml-5 -mt-5" style="animation: orbit-1 12s linear infinite;">
          <div
            class="h-10 w-10 rounded-lg border border-emerald-500/40 bg-emerald-500/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="text-emerald-400">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
              <circle cx="9" cy="7" r="4" class=""></circle>
            </svg>
          </div>
        </div>

        <!-- Node 2 -->
        <div class="absolute left-1/2 top-1/2 -ml-5 -mt-5" style="animation: orbit-2 12s linear infinite;">
          <div class="h-10 w-10 rounded-lg border border-cyan-500/40 bg-cyan-500/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="text-cyan-400">
              <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" class=""></path>
            </svg>
          </div>
        </div>

        <!-- Node 3 -->
        <div class="absolute left-1/2 top-1/2 -ml-5 -mt-5" style="animation: orbit-3 12s linear infinite;">
          <div
            class="h-10 w-10 rounded-lg border border-violet-500/40 bg-violet-500/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="text-violet-400">
              <rect width="18" height="11" x="3" y="11" rx="2" ry="2" class=""></rect>
              <path d="M7 11V7a5 5 0 0 1 10 0v4" class=""></path>
            </svg>
          </div>
        </div>

        <!-- Node 4 -->
        <div class="absolute left-1/2 top-1/2 -ml-5 -mt-5" style="animation: orbit-4 12s linear infinite;">
          <div
            class="h-10 w-10 rounded-lg border border-fuchsia-500/40 bg-fuchsia-500/10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="text-fuchsia-400">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
              <polyline points="7 10 12 15 17 10" class=""></polyline>
              <line x1="12" y1="15" x2="12" y2="3" class=""></line>
            </svg>
          </div>
        </div>
      </div>

      <!-- Connecting Lines (animated) -->
      <svg class="absolute inset-0 pointer-events-none" width="100%" height="100%">
        <defs class="">

        </defs>
        <line class="connection-line" stroke="url(#line-gradient-1)" stroke-width="1.5" stroke-dasharray="4 4"
          style="animation: dash-flow 2s linear infinite;">
          <animate attributeName="x1" values="50%;50%;50%" dur="12s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="y1" values="50%;50%;50%" dur="12s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="x2" dur="12s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="y2" dur="12s" repeatCount="indefinite" class=""></animate>
        </line>
      </svg>

      <!-- Data Flow Particles -->
      <div class="data-particle" style="animation: flow-particle-1 4s ease-in-out infinite;"></div>
      <div class="data-particle" style="animation: flow-particle-2 4s ease-in-out infinite 1s;"></div>
      <div class="data-particle" style="animation: flow-particle-3 4s ease-in-out infinite 2s;"></div>
      <div class="data-particle" style="animation: flow-particle-4 4s ease-in-out infinite 3s;"></div>
    </div>
  </div>

  <!-- Details -->
  <div class="mt-6 space-y-2">
    <div class="flex items-center justify-between text-xs">
      <span class="text-zinc-400">Popular Apps</span>
      <span class="text-sky-300 transition-all" style="animation: fade-in-out 2s ease-in-out infinite;">120+</span>
    </div>
    <div class="flex items-center justify-between text-xs">
      <span class="text-zinc-400">API Endpoints</span>
      <span class="text-zinc-200 transition-all" style="animation: fade-in-out 2s ease-in-out infinite 0.5s;">850+</span>
    </div>
    <div class="flex items-center justify-between text-xs">
      <span class="text-zinc-400">Custom Webhooks</span>
      <span class="text-emerald-400 transition-all" style="animation: fade-in-out 2s ease-in-out infinite 1s;">Unlimited</span>
    </div>
  </div>

  <style>
    @keyframes orbit-1 {
      from {
        transform: rotate(0deg) translateX(90px) rotate(0deg);
      }

      to {
        transform: rotate(360deg) translateX(90px) rotate(-360deg);
      }
    }

    @keyframes orbit-2 {
      from {
        transform: rotate(90deg) translateX(90px) rotate(-90deg);
      }

      to {
        transform: rotate(450deg) translateX(90px) rotate(-450deg);
      }
    }

    @keyframes orbit-3 {
      from {
        transform: rotate(180deg) translateX(90px) rotate(-180deg);
      }

      to {
        transform: rotate(540deg) translateX(90px) rotate(-540deg);
      }
    }

    @keyframes orbit-4 {
      from {
        transform: rotate(270deg) translateX(90px) rotate(-270deg);
      }

      to {
        transform: rotate(630deg) translateX(90px) rotate(-630deg);
      }
    }

    @keyframes pulse-glow {

      0%,
      100% {
        box-shadow: 0 0 40px -10px rgba(56, 189, 248, 0.6);
      }

      50% {
        box-shadow: 0 0 60px 0px rgba(56, 189, 248, 0.9);
      }
    }

    @keyframes dash-flow {
      0% {
        stroke-dashoffset: 8;
      }

      100% {
        stroke-dashoffset: 0;
      }
    }

    .data-particle {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(56, 189, 248, 0.8);
      opacity: 0;
    }

    @keyframes flow-particle-1 {
      0% {
        top: 24px;
        left: 50%;
        opacity: 0;
      }

      25% {
        opacity: 1;
      }

      50% {
        top: 50%;
        left: 50%;
        opacity: 1;
      }

      75% {
        opacity: 0.5;
      }

      100% {
        top: 50%;
        left: calc(50% + 90px);
        opacity: 0;
      }
    }

    @keyframes flow-particle-2 {
      0% {
        top: 50%;
        left: calc(50% + 90px);
        opacity: 0;
      }

      25% {
        opacity: 1;
      }

      50% {
        top: 50%;
        left: 50%;
        opacity: 1;
      }

      75% {
        opacity: 0.5;
      }

      100% {
        top: calc(50% + 90px);
        left: 50%;
        opacity: 0;
      }
    }

    @keyframes flow-particle-3 {
      0% {
        top: calc(50% + 90px);
        left: 50%;
        opacity: 0;
      }

      25% {
        opacity: 1;
      }

      50% {
        top: 50%;
        left: 50%;
        opacity: 1;
      }

      75% {
        opacity: 0.5;
      }

      100% {
        top: 50%;
        left: calc(50% - 90px);
        opacity: 0;
      }
    }

    @keyframes flow-particle-4 {
      0% {
        top: 50%;
        left: calc(50% - 90px);
        opacity: 0;
      }

      25% {
        opacity: 1;
      }

      50% {
        top: 50%;
        left: 50%;
        opacity: 1;
      }

      75% {
        opacity: 0.5;
      }

      100% {
        top: 24px;
        left: 50%;
        opacity: 0;
      }
    }

    @keyframes fade-in-out {

      0%,
      100% {
        opacity: 0.7;
      }

      50% {
        opacity: 1;
      }
    }
  </style>
</div>