Audio Plugin Control Panel UI Mockup

<div class="min-h-screen flex items-center justify-center bg-black">
  <div
    class="aspect-[16/10] min-h-[500px] overflow-hidden flex flex-col bg-[#454c5f] w-full max-w-5xl rounded-[2rem] relative shadow-[0_40px_80px_rgba(0,0,0,0.5),inset_0_2px_2px_rgba(255,255,255,0.1)]"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(1)">
    <!-- Central Split Gradient Background -->
    <div
      class="absolute inset-0 bg-[linear-gradient(90deg,rgba(255,255,255,0.03)_50%,rgba(0,0,0,0.05)_50%)] pointer-events-none">
    </div>

    <!-- Top Bar -->
    <div class="relative flex justify-between items-center px-8 pt-8 pb-4">
      <!-- Power Button -->
      <button class="w-12 h-12 rounded-full bg-[#323846] flex items-center justify-center shadow-[inset_0_3px_6px_rgba(0,0,0,0.4),0_1px_1px_rgba(255,255,255,0.05)] border border-[#2a2f3d] group">
          <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" data-lucide="power" aria-hidden="true" class="lucide lucide-power text-purple-500 w-5 h-5 drop-shadow-[0_0_8px_rgba(168,85,247,0.8)] transition-transform group-active:scale-95"><path d="M12 2v10" class=""></path><path d="M18.4 6.6a9 9 0 1 1-12.77.04" class=""></path></svg>
        </button>

      <!-- Preset Dropdown -->
      <div class="relative flex items-center">
        <div
          class="w-64 h-10 bg-gradient-to-b from-[#3a4153] to-[#343a49] rounded-full flex items-center justify-between px-5 shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_1px_1px_rgba(255,255,255,0.1)] border border-[#2e3443] cursor-pointer">
          <span class="text-gray-200 text-sm font-normal tracking-wide">
              Vintage Tape
            </span>
          <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"
            data-lucide="chevron-down" aria-hidden="true" class="lucide lucide-chevron-down text-gray-400 w-4 h-4">
            <path d="m6 9 6 6 6-6" class=""></path>
          </svg>
        </div>
        <!-- Dropdown recess shape faked with absolute div -->
        <div
          class="absolute -inset-y-4 -inset-x-8 bg-[#373d4d] -z-10 rounded-b-[2rem] shadow-[inset_0_-4px_10px_rgba(0,0,0,0.2)] opacity-50 blur-md pointer-events-none">
        </div>
      </div>

      <!-- Undo/Redo -->
      <div class="flex gap-3">
        <button class="w-10 h-10 rounded-full bg-[#363d4d] flex items-center justify-center shadow-[0_4px_6px_rgba(0,0,0,0.3),inset_0_1px_1px_rgba(255,255,255,0.1)] border border-[#2f3544] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] transition-all">
            <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" data-lucide="corner-up-left" aria-hidden="true" class="lucide lucide-corner-up-left text-gray-300 w-4 h-4"><path d="M20 20v-7a4 4 0 0 0-4-4H4" class=""></path><path d="M9 14 4 9l5-5" class=""></path></svg>
          </button>
        <button class="w-10 h-10 rounded-full bg-[#363d4d] flex items-center justify-center shadow-[0_4px_6px_rgba(0,0,0,0.3),inset_0_1px_1px_rgba(255,255,255,0.1)] border border-[#2f3544] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] transition-all">
            <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" data-lucide="corner-up-right" aria-hidden="true" class="lucide lucide-corner-up-right text-gray-300 w-4 h-4"><path d="m15 14 5-5-5-5" class=""></path><path d="M4 20v-7a4 4 0 0 1 4-4h12" class=""></path></svg>
          </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="relative flex-1 flex items-center justify-between px-12 pb-24">
      <!-- Left Dial Section -->
      <div class="flex flex-col items-center gap-6">
        <!-- Dial -->
        <div class="relative w-64 h-64 flex items-center justify-center">
          <!-- SVG Ticks and Rings -->
          <svg viewBox="0 0 200 200" class="absolute inset-0 w-full h-full transform -rotate-135">
            <!-- Outer Ticks Background -->
            <circle cx="100" cy="100" r="85" fill="none" stroke="#8e96aa" stroke-width="1.5" stroke-dasharray="2 10"
              opacity="0.4" class=""></circle>
            <!-- Outer Ticks Active -->
            <circle cx="100" cy="100" r="85" fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="2 10"
              stroke-dashoffset="0" stroke-linecap="round" class="drop-shadow-[0_0_4px_rgba(168,85,247,0.6)]"
              style="stroke-dasharray: 2 10; stroke-dashoffset: 0; stroke-dasharray: 200 1000;"></circle>

            <!-- Thick Track Background -->
            <circle cx="100" cy="100" r="65" fill="none" stroke="#2c3240" stroke-width="8" class="shadow-inner">
            </circle>
            <!-- Thick Track Active -->
            <circle cx="100" cy="100" r="65" fill="none" stroke="#a855f7" stroke-width="8" stroke-dasharray="408"
              stroke-dashoffset="250" stroke-linecap="round" class="drop-shadow-[0_0_8px_rgba(168,85,247,0.8)]">
            </circle>
          </svg>

          <!-- Physical Knob -->
          <div
            class="relative w-40 h-40 rounded-full bg-gradient-to-b from-[#404759] to-[#343a49] shadow-[0_20px_30px_rgba(0,0,0,0.6),inset_0_2px_3px_rgba(255,255,255,0.15)] flex items-center justify-center border border-[#2e3443]">
            <!-- Inner Well -->
            <div
              class="w-24 h-24 rounded-full bg-[#303645] shadow-[inset_0_8px_15px_rgba(0,0,0,0.6),0_1px_1px_rgba(255,255,255,0.05)] flex items-center justify-center">
              <span class="text-[#1a1f29] text-sm font-medium tracking-widest drop-shadow-[0_1px_0_rgba(255,255,255,0.1)]">
                  LEFT
                </span>
            </div>
            <!-- Indicator Dot -->
            <div
              class="absolute top-5 right-5 w-4 h-4 rounded-full bg-[#a855f7] shadow-[0_0_12px_#a855f7,inset_0_1px_2px_rgba(255,255,255,0.6),0_2px_4px_rgba(0,0,0,0.4)] border border-[#d8b4fe]">
              <div
                class="w-1.5 h-1.5 rounded-full bg-[#e9d5ff] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-80">
              </div>
            </div>
          </div>
        </div>

        <!-- Value and Sync -->
        <div class="flex flex-col items-center gap-4">
          <span class="text-gray-100 text-2xl font-normal tracking-tight">
              1 / 8
            </span>
          <button class="px-5 py-1.5 rounded-full bg-[#202430] shadow-[inset_0_3px_6px_rgba(0,0,0,0.5),0_1px_1px_rgba(255,255,255,0.05)] border border-[#1a1e28]">
              <span class="text-[#a855f7] text-xs font-normal tracking-widest drop-shadow-[0_0_4px_rgba(168,85,247,0.5)]">
                SYNC
              </span>
            </button>
        </div>
      </div>

      <!-- Center Controls -->
      <div class="flex flex-col items-center justify-center gap-12 w-64 -mt-16 z-10">
        <!-- Mode Buttons -->
        <div class="flex gap-3">
          <button class="px-5 py-2 rounded-full bg-[#3a4153] shadow-[0_4px_6px_rgba(0,0,0,0.3),inset_0_1px_1px_rgba(255,255,255,0.1)] border border-[#2f3544]">
              <span class="text-gray-300 text-xs font-normal tracking-widest uppercase">
                Sync
              </span>
            </button>
          <button class="px-5 py-2 rounded-full bg-[#2d3343] shadow-[inset_0_4px_8px_rgba(0,0,0,0.6),0_1px_1px_rgba(255,255,255,0.05)] border border-[#242936]">
              <span class="text-white text-xs font-normal tracking-widest uppercase drop-shadow-md">
                Crossfeed
              </span>
            </button>
          <button class="px-5 py-2 rounded-full bg-[#3a4153] shadow-[0_4px_6px_rgba(0,0,0,0.3),inset_0_1px_1px_rgba(255,255,255,0.1)] border border-[#2f3544]">
              <span class="text-[#22d3ee] text-xs font-normal tracking-widest uppercase">
                Swell
              </span>
            </button>
        </div>

        <!-- Sliders -->
        <div class="w-full flex flex-col gap-8">
          <!-- Gain Slider -->
          <div class="flex flex-col gap-2">
            <div class="flex justify-center">
              <span class="text-gray-100 text-sm font-normal tracking-wide">
                  Feedback
                </span>
            </div>
            <div class="relative w-full h-8 flex items-center group">
              <!-- Ticks Top -->
              <div
                class="absolute top-0 w-full h-1 bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,#6b7280_4px,#6b7280_5.5px)] opacity-50">
              </div>

              <!-- Track -->
              <div class="w-full h-1.5 bg-[#252a38] rounded-full shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)]"></div>

              <!-- Fill -->
              <div
                class="absolute left-0 h-1.5 bg-gradient-to-r from-purple-600 to-[#a855f7] rounded-full w-[40%] shadow-[0_0_8px_rgba(168,85,247,0.4)]">
              </div>

              <!-- Thumb -->
              <div
                class="absolute left-[40%] -ml-2 w-3.5 h-6 bg-gradient-to-b from-[#555d72] to-[#3b4152] rounded shadow-[0_5px_8px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.3)] border border-[#2a2f3d] cursor-pointer flex justify-center items-center">
                <div class="w-0.5 h-3 bg-[#202430] rounded-full shadow-[inset_0_1px_1px_rgba(0,0,0,0.5)]"></div>
              </div>

              <!-- Ticks Bottom -->
              <div
                class="absolute bottom-0 w-full h-1 bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,#6b7280_4px,#6b7280_5.5px)] opacity-50">
              </div>

              <!-- Icons/Values -->
              <div class="absolute -left-6 text-gray-400">
                <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="infinity" aria-hidden="true" class="lucide lucide-infinity w-3 h-3">
                  <path d="M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8" class=""></path>
                </svg>
              </div>
              <div class="absolute -right-8 text-gray-300 text-xs font-medium">
                75
              </div>
            </div>
          </div>

          <!-- Mix Slider -->
          <div class="flex flex-col gap-2">
            <div class="flex justify-center">
              <span class="text-gray-100 text-sm font-normal tracking-wide">
                  Dry/Wet
                </span>
            </div>
            <div class="relative w-full h-8 flex items-center group">
              <div
                class="absolute top-0 w-full h-1 bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,#6b7280_4px,#6b7280_5.5px)] opacity-50">
              </div>

              <div class="w-full h-1.5 bg-[#252a38] rounded-full shadow-[inset_0_2px_4px_rgba(0,0,0,0.5)]"></div>

              <div
                class="absolute left-0 h-1.5 bg-gradient-to-r from-purple-600 to-[#a855f7] rounded-full w-[70%] shadow-[0_0_8px_rgba(168,85,247,0.4)]">
              </div>

              <div
                class="absolute left-[70%] -ml-2 w-3.5 h-6 bg-gradient-to-b from-[#555d72] to-[#3b4152] rounded shadow-[0_5px_8px_rgba(0,0,0,0.6),inset_0_1px_1px_rgba(255,255,255,0.3)] border border-[#2a2f3d] cursor-pointer flex justify-center items-center">
                <div class="w-0.5 h-3 bg-[#202430] rounded-full shadow-[inset_0_1px_1px_rgba(0,0,0,0.5)]"></div>
              </div>

              <div
                class="absolute bottom-0 w-full h-1 bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,#6b7280_4px,#6b7280_5.5px)] opacity-50">
              </div>

              <div class="absolute -left-6 text-gray-400">
                <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="infinity" aria-hidden="true" class="lucide lucide-infinity w-3 h-3">
                  <path d="M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8" class=""></path>
                </svg>
              </div>
              <div class="absolute -right-8 text-gray-300 text-xs font-medium">
                50
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Dial Section -->
      <div class="flex flex-col items-center gap-6">
        <!-- Dial -->
        <div class="relative w-64 h-64 flex items-center justify-center">
          <svg viewBox="0 0 200 200" class="absolute inset-0 w-full h-full transform -rotate-135">
            <circle cx="100" cy="100" r="85" fill="none" stroke="#8e96aa" stroke-width="1.5" stroke-dasharray="2 10"
              opacity="0.4" class=""></circle>
            <circle cx="100" cy="100" r="85" fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="2 10"
              stroke-dashoffset="0" stroke-linecap="round" class="drop-shadow-[0_0_4px_rgba(168,85,247,0.6)]"
              style="stroke-dasharray: 2 10; stroke-dashoffset: 0; stroke-dasharray: 80 1000;"></circle>

            <circle cx="100" cy="100" r="65" fill="none" stroke="#2c3240" stroke-width="8" class="shadow-inner">
            </circle>
            <!-- Less filled track -->
            <circle cx="100" cy="100" r="65" fill="none" stroke="#a855f7" stroke-width="8" stroke-dasharray="408"
              stroke-dashoffset="330" stroke-linecap="round" class="drop-shadow-[0_0_8px_rgba(168,85,247,0.8)]">
            </circle>
          </svg>

          <!-- Physical Knob -->
          <div
            class="relative w-40 h-40 rounded-full bg-gradient-to-b from-[#3d4355] to-[#313745] shadow-[0_20px_30px_rgba(0,0,0,0.6),inset_0_2px_3px_rgba(255,255,255,0.15)] flex items-center justify-center border border-[#2e3443]">
            <div
              class="w-24 h-24 rounded-full bg-[#2e3443] shadow-[inset_0_8px_15px_rgba(0,0,0,0.6),0_1px_1px_rgba(255,255,255,0.05)] flex items-center justify-center">
              <span class="text-[#1a1f29] text-sm font-medium tracking-widest drop-shadow-[0_1px_0_rgba(255,255,255,0.1)]">
                  RIGHT
                </span>
            </div>
            <!-- Indicator Dot positioned higher up -->
            <div
              class="absolute top-10 left-8 w-4 h-4 rounded-full bg-[#323846] shadow-[inset_0_2px_4px_rgba(0,0,0,0.5),0_1px_1px_rgba(255,255,255,0.1)] flex items-center justify-center">
              <div class="w-1.5 h-1.5 rounded-full bg-[#22d3ee] shadow-[0_0_6px_#22d3ee]"></div>
            </div>
          </div>
        </div>

        <!-- Value and Sync -->
        <div class="flex flex-col items-center gap-4">
          <span class="text-gray-100 text-2xl font-normal tracking-tight">
              1 / 4D
            </span>
          <button class="px-5 py-1.5 rounded-full bg-[#363d4d] shadow-[0_4px_6px_rgba(0,0,0,0.3),inset_0_1px_1px_rgba(255,255,255,0.1)] border border-[#2f3544]">
              <span class="text-[#22d3ee] text-xs font-normal tracking-widest drop-shadow-[0_0_4px_rgba(34,211,238,0.3)]">
                LINK
              </span>
            </button>
        </div>
      </div>
    </div>

    <!-- Bottom Filter Panel -->
    <div
      class="absolute bottom-0 left-1/2 -translate-x-1/2 w-3/5 h-28 bg-[#282d3e] rounded-t-[3rem] shadow-[0_-10px_20px_rgba(0,0,0,0.3),inset_0_2px_2px_rgba(255,255,255,0.05)] border-t border-[#3a4153] flex flex-col items-center justify-center px-12 z-20">
      <div class="flex justify-between w-full px-4 mb-2">
        <span class="text-gray-100 text-sm font-normal tracking-wide">
            Low Cut
          </span>
        <span class="text-gray-100 text-sm font-normal tracking-wide">
            High Cut
          </span>
      </div>

      <div class="relative w-full h-10 flex items-center">
        <!-- Ticks Top -->
        <div
          class="absolute top-1 w-full h-1 bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,#5e6578_4px,#5e6578_5.5px)] opacity-50">
        </div>

        <!-- Track Base -->
        <div class="w-full h-1.5 bg-[#1a1e28] rounded-full shadow-[inset_0_2px_4px_rgba(0,0,0,0.6)]"></div>

        <!-- Orange Left Fill -->
        <div
          class="absolute left-[30%] h-1.5 bg-gradient-to-r from-[#7e22ce] to-[#a855f7] w-[20%] shadow-[0_0_6px_rgba(168,85,247,0.3)]">
        </div>

        <!-- Cyan Right Fill -->
        <div
          class="absolute left-[50%] h-1.5 bg-gradient-to-r from-[#22d3ee] to-[#0891b2] w-[20%] shadow-[0_0_6px_rgba(34,211,238,0.3)]">
        </div>

        <!-- LPass Thumb -->
        <div
          class="absolute left-[30%] -ml-2.5 w-4 h-7 bg-gradient-to-b from-[#555d72] to-[#3b4152] rounded shadow-[0_6px_10px_rgba(0,0,0,0.7),inset_0_1px_1px_rgba(255,255,255,0.3)] border border-[#2a2f3d] cursor-pointer flex justify-center items-center">
          <div class="w-0.5 h-3.5 bg-[#1c212c] rounded-full shadow-[inset_0_1px_1px_rgba(0,0,0,0.5)]"></div>
        </div>

        <!-- HPass Thumb -->
        <div
          class="absolute left-[70%] -ml-2.5 w-4 h-7 bg-gradient-to-b from-[#555d72] to-[#3b4152] rounded shadow-[0_6px_10px_rgba(0,0,0,0.7),inset_0_1px_1px_rgba(255,255,255,0.3)] border border-[#2a2f3d] cursor-pointer flex justify-center items-center">
          <div class="w-0.5 h-3.5 bg-[#1c212c] rounded-full shadow-[inset_0_1px_1px_rgba(0,0,0,0.5)]"></div>
        </div>

        <!-- Ticks Bottom -->
        <div
          class="absolute bottom-1 w-full h-1 bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,#5e6578_4px,#5e6578_5.5px)] opacity-50">
        </div>

        <!-- Value Labels -->
        <div class="absolute -left-10 text-gray-300 text-xs font-medium">
          20 Hz
        </div>
        <div class="absolute -right-14 text-gray-300 text-xs font-medium">
          18 kHz
        </div>
      </div>
    </div>
  </div>