Block Pcb Semiconductor

Live Demos Hub
GitHub ↗

Block Pcb Semiconductor

Interactive Shadcn-quality hypermedia component for Hyperstack.

Interactive Preview

💻
PCB EDA & Semiconductor Fab IPC CLASS 3

BGA-1156 SoC Board (Rev D4) • 12-Layer Megtron 6 (3nm FinFET Co-Design)

DRC: 0 Violations • Min Trace: 3.5 mil
Layer Stack
PCB L1 TOP COPPER • 0.5 OZ ED PCIE GEN 5 (32 GT/s) • Z_DIFF: 90Ω TARGET
U1 SOC BGA-1156 PCIe_TX0_P/N (90.2Ω) AOI: SOLDER OK 300mm Silicon Wafer (3nm FinFET) 824 Good Dies • 45 Defect Dies (94.8% Yield)
Impedance: 90.2 Ω • Skew: 0.28 ps
High-Speed EDA Telemetry IPC-2141A
PCIe Gen 5 Differential Z_diff
90.2 Ω ±2% TOLERANCE

Trace Width: 4.2 mil • Spacing: 5.8 mil • Dielectric: Megtron 6

High-Speed Skew Matching
Intra-Pair Skew: 0.28 ps (0.04mm)
PCIe Gen 5 Limit: < 1.00 ps Skew
Wafer Fab Yield: 94.8% Good Dies
SMT Defect Rate: 0.02 DPMO (IPC Class 3)
Standard: IPC-A-610 Class 3 • Cleanroom: ISO Class 1
EDA Engine: 60.0 FPS DRC Rules: 142 Checked @diag: EDA_DRC_PASS

HTML Source

<!-- =========================================================================
     ENGINEERING DESIGN BLOCK: ELECTRONICS, MULTI-LAYER PCB & SEMICONDUCTOR FAB
     12-Layer High-Speed EDA Gerber Layout, BGA Escape Routing & Silicon Wafer Map
     ========================================================================= -->
<div class="block-pcb-semiconductor rounded-3xl bg-slate-950 border border-slate-800/80 shadow-2xl overflow-hidden flex flex-col select-none"
     hx-state='{ "activeLayer": "l1", "zDiff": 90.2, "skewPs": 0.28, "dieYield": 94.8, "drcViolations": 0, "showWafer": false }'>

  <!-- ZONE 1: BLOCK HEADER -->
  <div class="px-5 py-3.5 bg-slate-900/90 border-b border-slate-800 flex flex-wrap items-center justify-between gap-3">
    <div class="flex items-center gap-3">
      <div class="w-8 h-8 rounded-xl bg-teal-600/20 border border-teal-500/40 flex items-center justify-center text-teal-400 font-black text-sm">
        💻
      </div>
      <div>
        <div class="flex items-center gap-2">
          <span class="text-xs font-black uppercase tracking-wider text-teal-400">PCB EDA & Semiconductor Fab</span>
          <span class="px-1.5 py-0.5 rounded text-[9px] font-extrabold bg-teal-500/10 text-teal-400 border border-teal-500/20">IPC CLASS 3</span>
        </div>
        <h2 class="text-sm font-bold text-white flex items-center gap-2">
          <span>BGA-1156 SoC Board (Rev D4)</span>
          <span class="text-slate-500">•</span>
          <span class="text-xs text-slate-300 font-normal">12-Layer Megtron 6 (3nm FinFET Co-Design)</span>
        </h2>
      </div>
    </div>

    <!-- Technical EDA Parameters -->
    <div class="flex items-center gap-2 bg-slate-950 px-3 py-1.5 rounded-2xl border border-slate-800 text-xs">
      <span class="text-slate-400 font-bold">DRC: <span class="text-emerald-400 font-mono font-black" hx-text="drcViolations + ' Violations'">0 Violations</span></span>
      <span class="text-slate-600">•</span>
      <span class="text-teal-400 font-mono font-black">Min Trace: 3.5 mil</span>
    </div>
  </div>

  <!-- ZONE 2: CALIBRATION & LAYER STACKUP TOOLBAR -->
  <div class="px-5 py-2.5 bg-slate-900/40 border-b border-slate-800/80 flex flex-wrap items-center justify-between gap-3 text-xs">
    <!-- PCB Stackup Layer Switcher -->
    <div class="flex items-center gap-1.5">
      <span class="text-[10px] font-black uppercase tracking-wider text-slate-500 mr-1">Layer Stack</span>
      <button class="px-2.5 py-1 rounded-xl font-bold transition-all"
              hx-class='{ "bg-teal-600 text-slate-950 font-black shadow-md shadow-teal-600/30": activeLayer === "l1", "bg-slate-900 text-slate-400": activeLayer !== "l1" }'
              hx-action="activeLayer = 'l1'; showWafer = false; $appz.haptic('selection')">
        L1 Top Copper
      </button>
      <button class="px-2.5 py-1 rounded-xl font-bold transition-all"
              hx-class='{ "bg-teal-600 text-slate-950 font-black shadow-md shadow-teal-600/30": activeLayer === "l2", "bg-slate-900 text-slate-400": activeLayer !== "l2" }'
              hx-action="activeLayer = 'l2'; showWafer = false; $appz.haptic('selection')">
        L2 GND Plane
      </button>
      <button class="px-2.5 py-1 rounded-xl font-bold transition-all"
              hx-class='{ "bg-teal-600 text-slate-950 font-black shadow-md shadow-teal-600/30": activeLayer === "l3", "bg-slate-900 text-slate-400": activeLayer !== "l3" }'
              hx-action="activeLayer = 'l3'; showWafer = false; $appz.haptic('selection')">
        L3 PCIe Gen 5 Stripline
      </button>
      <button class="px-2.5 py-1 rounded-xl font-bold transition-all"
              hx-class='{ "bg-teal-600 text-slate-950 font-black shadow-md shadow-teal-600/30": activeLayer === "aoi", "bg-slate-900 text-slate-400": activeLayer !== "aoi" }'
              hx-action="activeLayer = 'aoi'; showWafer = false; $appz.haptic('selection')">
        AOI Solder Fillet
      </button>
    </div>

    <!-- Silicon 300mm Wafer Map Mode Toggle -->
    <div class="flex items-center gap-2">
      <button class="px-2.5 py-1 rounded-xl font-bold transition-all"
              hx-class='{ "bg-purple-600 text-white shadow-md shadow-purple-600/30": showWafer, "bg-slate-900 text-slate-400": !showWafer }'
              hx-action="showWafer = !showWafer; $appz.haptic('medium')">
        <span hx-text="showWafer ? '✓ 300mm Silicon Wafer Map' : 'Wafer Die Map'">Wafer Die Map</span>
      </button>
    </div>
  </div>

  <!-- ZONE 3 & 4: PCB GERBER VIEWPORT & IMPEDANCE INSPECTOR -->
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-0 min-h-[380px]">
    <!-- ZONE 3: VECTOR GERBER/EDA VIEWPORT (Cols 1..8) -->
    <div class="lg:col-span-8 relative bg-[#061214] p-5 flex flex-col justify-between overflow-x-auto border-b lg:border-b-0 lg:border-r border-slate-800/80">
      <!-- Top HUD Data Tags -->
      <div class="flex items-center justify-between text-xs font-mono text-teal-400/90 z-10 pointer-events-none">
        <span>PCB L1 TOP COPPER • 0.5 OZ ED</span>
        <span>PCIE GEN 5 (32 GT/s) • Z_DIFF: 90Ω TARGET</span>
      </div>

      <!-- Vector PCB Trace & BGA Escape Simulation via SVG -->
      <div class="relative w-full max-w-[460px] aspect-[4/3] mx-auto my-auto flex items-center justify-center">
        <!-- SVG PCB Gerber Layout Canvas -->
        <svg class="w-full h-full" viewBox="0 0 500 350" hx-show="!showWafer">
          <defs>
            <pattern id="pcbGrid" width="20" height="20" patternUnits="userSpaceOnUse">
              <circle cx="10" cy="10" r="0.8" fill="#134e4a" />
            </pattern>
          </defs>
          <rect width="500" height="350" fill="url(#pcbGrid)" />

          <!-- BGA Array Footprint (Center 10x10 Ball Grid Array) -->
          <g id="bga-pads" fill="#0d9488" stroke="#14b8a6" stroke-width="0.5">
            <!-- 6x6 BGA Grid representation -->
            <circle cx="210" cy="130" r="4" /> <circle cx="225" cy="130" r="4" /> <circle cx="240" cy="130" r="4" /> <circle cx="255" cy="130" r="4" /> <circle cx="270" cy="130" r="4" />
            <circle cx="210" cy="145" r="4" /> <circle cx="225" cy="145" r="4" /> <circle cx="240" cy="145" r="4" /> <circle cx="255" cy="145" r="4" /> <circle cx="270" cy="145" r="4" />
            <circle cx="210" cy="160" r="4" /> <circle cx="225" cy="160" r="4" /> <circle cx="240" cy="160" r="4" /> <circle cx="255" cy="160" r="4" /> <circle cx="270" cy="160" r="4" />
            <circle cx="210" cy="175" r="4" /> <circle cx="225" cy="175" r="4" /> <circle cx="240" cy="175" r="4" /> <circle cx="255" cy="175" r="4" /> <circle cx="270" cy="175" r="4" />
            <circle cx="210" cy="190" r="4" /> <circle cx="225" cy="190" r="4" /> <circle cx="240" cy="190" r="4" /> <circle cx="255" cy="190" r="4" /> <circle cx="270" cy="190" r="4" />
          </g>
          <!-- BGA Silkscreen Boundary -->
          <rect x="195" y="115" width="90" height="90" fill="none" stroke="#ffffff" stroke-width="1.2" stroke-dasharray="8 4" />
          <text x="200" y="110" fill="#ffffff" font-size="9" font-family="monospace">U1 SOC BGA-1156</text>

          <!-- High-Speed Differential Pairs with Accordion/Serpentine Delay Tuning -->
          <!-- Diff Pair 1 Positive -->
          <path d="M 270,160 L 320,160 L 330,150 L 340,170 L 350,150 L 360,170 L 370,160 L 460,160"
                fill="none" stroke="#2dd4bf" stroke-width="2.5" />
          <!-- Diff Pair 1 Negative (Matched length with exact serpentine spacing) -->
          <path d="M 270,166 L 318,166 L 328,156 L 338,176 L 348,156 L 358,176 L 368,166 L 460,166"
                fill="none" stroke="#5eead4" stroke-width="2.5" />
          <text x="380" y="152" fill="#2dd4bf" font-size="8" font-family="monospace">PCIe_TX0_P/N (90.2Ω)</text>

          <!-- Dog-Bone Escape Vias with Annular Rings -->
          <g id="dogbone-vias" fill="#14b8a6" stroke="#042f2e" stroke-width="1">
            <line x1="210" y1="130" x2="190" y2="120" stroke="#14b8a6" stroke-width="1.5" />
            <circle cx="190" cy="120" r="3" />
            <line x1="210" y1="145" x2="185" y2="140" stroke="#14b8a6" stroke-width="1.5" />
            <circle cx="185" cy="140" r="3" />
            <line x1="210" y1="160" x2="180" y2="160" stroke="#14b8a6" stroke-width="1.5" />
            <circle cx="180" cy="160" r="3" />
          </g>

          <!-- SMT 0201 Decoupling Capacitor Array with AOI Inspection Box -->
          <rect x="180" y="240" width="12" height="6" fill="#f59e0b" stroke="#ffffff" stroke-width="1" />
          <rect x="200" y="240" width="12" height="6" fill="#f59e0b" stroke="#ffffff" stroke-width="1" />
          <rect x="220" y="240" width="12" height="6" fill="#f59e0b" stroke="#ffffff" stroke-width="1" />
          <!-- AOI Passed Bounding Box -->
          <rect x="175" y="235" width="62" height="16" fill="none" stroke="#10b981" stroke-width="1.5" stroke-dasharray="2 1" />
          <text x="175" y="260" fill="#10b981" font-size="8" font-family="monospace">AOI: SOLDER OK</text>
        </svg>

        <!-- Silicon 300mm Wafer Die Map View via SVG (when showWafer = true) -->
        <svg class="w-full h-full" viewBox="0 0 500 350" hx-show="showWafer">
          <circle cx="250" cy="175" r="140" fill="#0f172a" stroke="#818cf8" stroke-width="3" />
          <!-- Notch at bottom -->
          <polygon points="250,315 245,310 255,310" fill="#818cf8" />
          <!-- Silicon Die Grid (Good Dies in Teal, Defect Dies in Rose) -->
          <g id="wafer-dies">
            <!-- Row of Good Dies -->
            <rect x="190" y="110" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="210" y="110" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="230" y="110" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="250" y="110" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="270" y="110" width="18" height="18" fill="#f43f5e" stroke="#042f2e" /> <!-- Defect Die -->
            <rect x="290" y="110" width="18" height="18" fill="#0d9488" stroke="#042f2e" />

            <rect x="170" y="130" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="190" y="130" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="210" y="130" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="230" y="130" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="250" y="130" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="270" y="130" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="290" y="130" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="310" y="130" width="18" height="18" fill="#0d9488" stroke="#042f2e" />

            <rect x="170" y="150" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="190" y="150" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="210" y="150" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="230" y="150" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="250" y="150" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="270" y="150" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="290" y="150" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
            <rect x="310" y="150" width="18" height="18" fill="#0d9488" stroke="#042f2e" />
          </g>
          <text x="180" y="85" fill="#818cf8" font-size="11" font-family="monospace" font-weight="900">300mm Silicon Wafer (3nm FinFET)</text>
          <text x="180" y="100" fill="#2dd4bf" font-size="9" font-family="monospace">824 Good Dies • 45 Defect Dies (94.8% Yield)</text>
        </svg>

        <!-- Viewport HUD Badge -->
        <div class="absolute bottom-2 left-2 bg-slate-900/80 px-2.5 py-1 rounded-xl border border-slate-800 text-[10px] text-slate-400">
          Impedance: <span class="font-bold text-teal-400 font-mono" hx-text="zDiff + ' Ω'">90.2 Ω</span> • Skew: <span class="text-white font-bold font-mono" hx-text="skewPs + ' ps'">0.28 ps</span>
        </div>
      </div>
    </div>

    <!-- ZONE 4: QUANTITATIVE IMPEDANCE & YIELD INSPECTOR (Cols 9..12) -->
    <div class="lg:col-span-4 bg-slate-900/50 p-5 flex flex-col justify-between space-y-4">
      <div>
        <div class="flex items-center justify-between pb-2 border-b border-slate-800/80">
          <span class="text-[10px] font-black uppercase tracking-widest text-teal-400">High-Speed EDA Telemetry</span>
          <span class="text-[10px] font-bold text-emerald-400">IPC-2141A</span>
        </div>

        <div class="mt-4 space-y-3">
          <!-- Differential Impedance Metric -->
          <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800">
            <span class="text-[10px] font-extrabold uppercase text-slate-400 block mb-1">PCIe Gen 5 Differential Z_diff</span>
            <div class="flex items-baseline justify-between">
              <span class="text-3xl font-black text-white font-mono" hx-text="zDiff + ' Ω'">90.2 Ω</span>
              <span class="text-xs font-bold text-emerald-400">±2% TOLERANCE</span>
            </div>
            <p class="text-[10px] text-slate-400 mt-1">Trace Width: 4.2 mil • Spacing: 5.8 mil • Dielectric: Megtron 6</p>
          </div>

          <!-- Skew & Length Matching -->
          <div class="p-3.5 rounded-2xl bg-slate-950/70 border border-slate-800 space-y-2">
            <span class="text-[10px] font-extrabold uppercase text-slate-400 block">High-Speed Skew Matching</span>
            <div class="flex justify-between text-[11px] font-bold">
              <span class="text-slate-300">Intra-Pair Skew:</span>
              <span class="text-teal-400 font-mono" hx-text="skewPs + ' ps (0.04mm)'">0.28 ps (0.04mm)</span>
            </div>
            <div class="flex justify-between text-[11px] font-bold">
              <span class="text-slate-300">PCIe Gen 5 Limit:</span>
              <span class="text-slate-400 font-mono">&lt; 1.00 ps Skew</span>
            </div>
          </div>

          <!-- Silicon Wafer Fab Yield -->
          <div class="p-3 rounded-2xl bg-slate-950/70 border border-slate-800 text-[10px] space-y-1">
            <div class="flex justify-between">
              <span class="text-slate-400">Wafer Fab Yield:</span>
              <span class="font-bold text-emerald-400 font-mono" hx-text="dieYield + '%'">94.8% Good Dies</span>
            </div>
            <div class="flex justify-between">
              <span class="text-slate-400">SMT Defect Rate:</span>
              <span class="font-bold text-white font-mono">0.02 DPMO (IPC Class 3)</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Action Button -->
      <div class="pt-3 border-t border-slate-800/80">
        <button class="w-full py-2.5 rounded-xl bg-teal-600 hover:bg-teal-500 text-slate-950 font-black text-xs active:scale-95 transition-all shadow-lg shadow-teal-600/20"
                hx-action="$appz.haptic('success')">
          Generate ODB++ / IPC-2581 Fab Package
        </button>
      </div>
    </div>
  </div>

  <!-- ZONE 5: AUDIT & @DIAG STATUS FOOTER -->
  <div class="px-5 py-2.5 bg-slate-900/90 border-t border-slate-800 flex flex-wrap items-center justify-between gap-3 text-xs text-slate-400">
    <div class="flex items-center gap-3">
      <span class="text-[10px] font-mono text-teal-400">Standard: IPC-A-610 Class 3</span>
      <span class="text-slate-600">•</span>
      <span class="text-[10px] font-mono">Cleanroom: ISO Class 1</span>
    </div>

    <!-- Diagnostic Telemetry -->
    <div class="flex items-center gap-4 text-[10px] font-bold">
      <span class="text-emerald-400 flex items-center gap-1">
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
        EDA Engine: 60.0 FPS
      </span>
      <span class="text-slate-500">DRC Rules: 142 Checked</span>
      <span class="text-teal-400 font-mono">@diag: EDA_DRC_PASS</span>
    </div>
  </div>

</div>