Animated Radar Converter Interface

<div class="relative w-full max-w-lg aspect-square flex items-center justify-center">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
    
    .converter-wrapper {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .mono-input {
      font-family: 'Space Mono', 'Courier New', monospace;
      font-variant-numeric: tabular-nums;
    }
    
    @keyframes pulse-rotate {
      0% { transform: rotate(0deg); opacity: 0.6; }
      50% { opacity: 1; }
      100% { transform: rotate(360deg); opacity: 0.6; }
    }
    
    @keyframes pulse-rotate-reverse {
      0% { transform: rotate(360deg); opacity: 0.5; }
      50% { opacity: 0.8; }
      100% { transform: rotate(0deg); opacity: 0.5; }
    }
    
    @keyframes scan {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    @keyframes ping {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.5); opacity: 0.5; }
      100% { transform: scale(1); opacity: 1; }
    }
    
    .acid-arc {
      animation: pulse-rotate 8s infinite linear;
    }
    
    .acid-arc-sharp {
      animation: pulse-rotate-reverse 10s infinite linear;
    }
    
    .scanner {
      animation: scan 4s infinite linear;
    }
    
    .dot-pulse {
      animation: ping 2s infinite;
    }
    
    .dot-pulse-2 {
      animation: ping 3s infinite 0.5s;
    }
    
    .label-tech {
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #6e6a7a;
    }</style>
  <div class="converter-wrapper relative w-full h-full">
    <div class="absolute w-full h-full rounded-full" style="border: 1px solid #1e1b2e;"></div>
    <div class="acid-arc absolute top-0 left-0 w-full h-full rounded-full" style="background: conic-gradient(from 230deg, transparent 0%, transparent 40%, rgba(167, 139, 250, 0.1) 60%, #A78BFA 80%, transparent 100%); mask-image: radial-gradient(transparent 62%, black 63%); -webkit-mask-image: radial-gradient(transparent 62%, black 63%); opacity: 0.8; filter: blur(8px);"></div>
    <div class="acid-arc-sharp absolute top-0 left-0 w-full h-full rounded-full" style="background: conic-gradient(from 50deg, transparent 0%, transparent 40%, rgba(249, 168, 212, 0.0) 60%, #F9A8D4 80%, transparent 100%); mask-image: radial-gradient(transparent 68%, black 69%); -webkit-mask-image: radial-gradient(transparent 68%, black 69%); opacity: 0.7;"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full" style="width: 80%; height: 80%; border: 1px dashed #2a2740; opacity: 0.5;"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full" style="width: 60%; height: 60%; border: 1px solid #221f35;"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full" style="width: 40%; height: 40%; border: 1px solid #1a1828; background: radial-gradient(circle, #0e0c14 0%, #07060B 100%);"></div>
    <div class="scanner absolute w-1/2 h-px top-1/2 left-1/2 origin-left" style="background: linear-gradient(90deg, #A78BFA, #F9A8D4); opacity: 0.4; box-shadow: 0 0 12px #A78BFA;"></div>
    <div class="dot-pulse absolute w-2 h-2 rounded-full z-10" style="background: #F9A8D4; box-shadow: 0 0 12px #F9A8D4; top: 65%; left: 65%;"></div>
    <div class="dot-pulse-2 absolute w-1.5 h-1.5 rounded-full z-10" style="background: #A78BFA; box-shadow: 0 0 10px #A78BFA; top: 30%; left: 28%;"></div>
    <div class="label-tech absolute top-2 left-1/2 -translate-x-1/2">REAL-TIME EXECUTION</div>
    <div class="label-tech absolute top-1/2 -right-5 -translate-y-1/2 rotate-90">LIQUIDITY DEPTH</div>
    <div class="label-tech absolute bottom-2 left-1/2 -translate-x-1/2">NETWORK STATUS: OPTIMAL</div>
    <div class="label-tech absolute top-1/2 -left-5 -translate-y-1/2 -rotate-90">FIAT GATEWAY</div>
    <div class="relative z-20 w-80 rounded-3xl p-8 flex flex-col gap-6" style="background: rgba(14, 12, 20, 0.85); backdrop-filter: blur(24px); border: 1px solid rgba(167, 139, 250, 0.15); box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(167, 139, 250, 0.05);">
      <div class="flex flex-col gap-2">
        <div class="flex justify-between items-baseline">
          <span class="text-xs uppercase tracking-widest font-medium" style="color: #6e6a7a;">YOU SEND</span>
          <span class="text-xs uppercase tracking-widest font-medium" style="color: #6e6a7a;">BAL: 4,200.00</span>
        </div>
        <div class="flex justify-between items-baseline">
          <input type="text" value="1,000" class="mono-input bg-transparent border-none text-3xl font-medium w-full outline-none" style="color: #f0eef5;" />
          <span class="text-sm font-semibold px-2 py-1 rounded" style="color: #6e6a7a; background: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.15);">USDC</span>
        </div>
      </div>
      <div class="flex justify-center -my-2 relative z-10">
        <div class="w-px h-5" style="background: #1e1b2e;"></div>
      </div>
      <div class="flex flex-col gap-2">
        <div class="flex justify-between items-baseline">
          <span class="text-xs uppercase tracking-widest font-medium" style="color: #6e6a7a;">YOU RECEIVE</span>
          <span class="text-xs uppercase tracking-widest font-medium" style="color: #6e6a7a;">RATE: 83.45</span>
        </div>
        <div class="flex justify-between items-baseline">
          <input type="text" value="83,450" readonly="" class="mono-input bg-transparent border-none text-3xl font-medium w-full outline-none" style="color: #C4B5FD;" />
          <span class="text-sm font-semibold px-2 py-1 rounded" style="color: #6e6a7a; background: rgba(167, 139, 250, 0.08); border: 1px solid rgba(167, 139, 250, 0.15);">INR</span>
        </div>
      </div>
      <div style="height: 1px; background: #1e1b2e; margin: 8px 0;"></div>
      <div class="flex justify-between items-baseline">
        <span class="text-xs uppercase tracking-widest font-medium" style="color: #6e6a7a;">NETWORK FEE</span>
        <span class="text-xs uppercase tracking-widest font-medium" style="color: #C4B5FD;">$0.00</span>
      </div>
      <button class="px-4 py-4 rounded-xl text-sm font-semibold uppercase
        tracking-wider transition-all duration-200 flex
        justify-between items-center" style="background: linear-gradient(135deg, #A78BFA 0%, #F9A8D4 100%); color: #07060B;" onmouseover="this.style.boxShadow='0 0 30px rgba(167, 139, 250, 0.4), 0 0 60px rgba(249, 168, 212, 0.3)'; this.style.transform='scale(1.02)';" onmouseout="this.style.boxShadow='none'; this.style.transform='scale(1)';">
        <div class="w-5 h-5 rounded-full flex items-center justify-center text-xs" style="background: rgba(7, 6, 11, 0.3); color: #07060B;">➜</div>
      </button>
    </div>
  </div>
</div>