Interactive Isometric Server Blades Display

<div id="isometric-server-component" class="relative w-full h-screen overflow-hidden flex items-center justify-center"
  style="background-color: #0b0c10; perspective: 2000px; font-family: 'Courier New', monospace;">
  <style>
    @keyframes assemble-blade {
      0% {
        opacity: 0;
        transform: translateZ(400px) translateX(200px);
      }

      100% {
        opacity: 1;
        transform: translateZ(0) translateX(0);
      }
    }

    .blade-3d {
      transform-style: preserve-3d;
      transition: transform 0.3s ease, background 0.3s ease;
      animation: assemble-blade 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    .blade-3d::after {
      content: '';
      position: absolute;
      right: -10px;
      top: 0;
      width: 10px;
      height: 100%;
      background: #0f1013;
      transform-origin: left;
      transform: rotateY(90deg);
    }

    .blade-3d::before {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 100%;
      height: 10px;
      background: #0a0b0e;
      transform-origin: top;
      transform: rotateX(-90deg);
    }

    .blade-3d:hover {
      transform: translateZ(20px) !important;
      background: #1a1b20 !important;
    }

    .status-pulse {
      animation: status-glow 2s infinite ease-in-out;
    }

    @keyframes status-glow {

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

      50% {
        opacity: 0.6;
        transform: scale(0.9);
      }
    }
  </style>

  <div id="iso-container" class="relative w-[760px] h-[800px]"
    style="transform-style: preserve-3d; transition: transform 0.1s ease-out;">
    <!-- Grid Base -->
    <div class="absolute w-[200%] h-[200%] top-[-50%] left-[-50%] pointer-events-none"
      style="background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; transform: translateZ(-100px);">
    </div>

    <!-- Server Blades -->
    <div class="blade-3d relative flex items-center px-10 mb-5 h-[140px] rounded-lg border border-white/5 shadow-2xl"
      style="background: #15161a; z-index: 4; animation-delay: 0.1s;">
      <div class="status-pulse w-2 h-2 rounded-full mr-5" style="background: #45a29e; box-shadow: 0 0 10px #45a29e;">
      </div>
      <div class="flex-1 text-xl text-gray-300 truncate tracking-wider">INFRASTRUCTURE_CORE_V1</div>
      <div class="text-xs text-gray-600 uppercase ml-5">ONLINE</div>
    </div>

    <div class="blade-3d relative flex items-center px-10 mb-5 h-[140px] rounded-lg border border-white/5 shadow-2xl"
      style="background: #15161a; z-index: 3; animation-delay: 0.2s;">
      <div class="status-pulse w-2 h-2 rounded-full mr-5" style="background: #eab308; box-shadow: 0 0 10px #eab308;">
      </div>
      <div class="flex-1 text-xl text-gray-300 truncate tracking-wider">DATA_PIPELINE_NODE</div>
      <div class="text-xs text-gray-600 uppercase ml-5">SYNCING</div>
    </div>

    <div class="blade-3d relative flex items-center px-10 mb-5 h-[140px] rounded-lg border border-white/5 shadow-2xl"
      style="background: #15161a; z-index: 2; animation-delay: 0.3s;">
      <div class="status-pulse w-2 h-2 rounded-full mr-5" style="background: #45a29e; box-shadow: 0 0 10px #45a29e;">
      </div>
      <div class="flex-1 text-xl text-gray-300 truncate tracking-wider">NEURAL_NET_REGISTRY</div>
      <div class="text-xs text-gray-600 uppercase ml-5">ACTIVE</div>
    </div>

    <div class="blade-3d relative flex items-center px-10 mb-5 h-[140px] rounded-lg border border-white/5 shadow-2xl"
      style="background: #15161a; z-index: 1; animation-delay: 0.4s;">
      <div class="status-pulse w-2 h-2 rounded-full mr-5" style="background: #45a29e; box-shadow: 0 0 10px #45a29e;">
      </div>
      <div class="flex-1 text-xl text-gray-300 truncate tracking-wider">SECURITY_GATEWAY</div>
      <div class="text-xs text-gray-600 uppercase ml-5">LOCKED</div>
    </div>
  </div>

  <script>
    (function() {
      const iso = document.getElementById('iso-container');
      const baseRotateX = 55;
      const baseRotateZ = -45;
      const baseOffsetX = 220; 
      const baseOffsetY = 0;

      function updateTransform(xDeg, zDeg) {
        iso.style.transform = `translate3d(${baseOffsetX}px, ${baseOffsetY}px, 0px) rotateX(${xDeg}deg) rotateZ(${zDeg}deg)`;
      }

      // Initial State
      updateTransform(baseRotateX, baseRotateZ);

      // Interactive Mouse Movement
      window.addEventListener('mousemove', (e) => {
        const percentX = (e.clientX / window.innerWidth - 0.5);
        const percentY = (e.clientY / window.innerHeight - 0.5);
        
        const dynamicX = baseRotateX - (percentY * 10);
        const dynamicZ = baseRotateZ + (percentX * 10);
        
        updateTransform(dynamicX, dynamicZ);
      });
    })();
  </script>
</div>