Interactive Mockup 1 of 2 ET-SoC-1: Unified 2D ↔ 3D Bridge & N7 Material Palette
Live 2D Diagram ↗  ·  Live 3D Companion ↗

Bridging the 2D Chip Ladder and the 3D Nanoscale Views

Interactive specification and prototype addressing four cross-view inconsistencies between et-soc1-chip-diagram (index.html L7659–7664) and et-soc1-in-3d: (1) loss of the user’s ladder branch on return, (2) missing lib.wire 3D link, (3) selected-child mismatch in panel(html), and (4) material color & TSMC N7 number disconnect between 2D and 3D.

1. Unified 2D ↔ 3D Material Palette & TSMC N7 Quantitative Callouts

index.html :root (--c1..--c5) ↔ et-soc1-in-3d#finfet / #channel
3D View Theme & Callouts:
Gate Bias (G):
2D Ladder View (lib.finfet / lib.channel) Warm Paper #f9f9f7 · system-ui
2D FinFET & Channel Cross-Section (et-soc1-chip-diagram) 57 nm gate pitch (CPP) · 30 nm fin pitch · 6 × 52 nm silicon fin · 16.5 nm channel p-type silicon substrate + STI oxide (--c3 #1baf7a) SOURCE (n⁺) Si fin 6×52 nm DRAIN (n⁺) V_DD = 0.517 V 16.5 nm channel · ~75 e⁻ HfO₂ high-k (~1.5 nm · --c4) METAL GATE (--c1) G = 0.517 V (on) Co / M0 (--c5) Co / M0 (--c5) 57 nm contacted gate pitch (CPP) · 13 metal layers (M0–M12) above
CPP: 57 nm Fin pitch: 30 nm Fin: 6 × 52 nm L_ch: 16.5 nm V_min: 0.517 V
3D Companion View (et-soc1-in-3d#finfet) Unified Paper + N7 Tokens
3D Isometric FinFET Cell — Harmonized with 2D Ladder Same semantic colors (--c1..--c5) + TSMC N7 / ET-SoC-1 dimensions Metal Gate (--c1) 57 nm CPP · G = 0.517 V Silicon Fin (--c3) 6 nm wide × 52 nm tall Channel (--c2) 16.5 nm · ~75 e⁻ inversion
Unified --c1..--c5 palette N7 dimensions visible in 3D Synced 0.517 V gate state
Physical Structure 2D Diagram (et-soc1-chip-diagram) Current 3D Page (et-soc1-in-3d) — Disconnected Proposed Unified 3D Token
Metal Gate (TiN/W) --c1 #2a78d6 (Blue) #bb9654 (Warm Gold) --c1 #2a78d6 (Blue)
Silicon Fin (Source / Drain) --c3 #1baf7a (Green) #526e91 (Slate Blue) --c3 #1baf7a (Green)
Channel & Conduction e⁻ --c2 #eb6834 (Orange) #41d7ba (Turquoise) --c2 #eb6834 (Orange)
High-k Gate Oxide (HfO₂) --c4 #d49b1f (Amber) #d8c49a (Pale Tan) --c4 #d49b1f (Amber)
Local Cobalt / M0–M12 Copper --c5 #8854d0 (Purple) #c57b43 / #6c809a --c5 #8854d0 (Purple) + Cu accent

2. Context-Aware 2D ↔ 3D Navigation Bridge Simulator

index.html L7659–7664 (panel) ↔ et-soc1-in-3d VIEWS[k].back

Try switching the User’s Ladder Branch, the Current Layer, and the Selected Part (SEL) below to see how the current implementation drops the user’s branch, ignores selected child parts, and omits lib.wire — and how the proposed 8-line fix resolves all three.

1. Ladder Branch into Nanoscale:
2. Current Layer + Selected Part (SEL):
Current Behavior (index.html L7659–7664) 3 Navigation Bugs

Proposed Behavior (Selected-Part + lib.wire + ?from=) Context-Preserving

Exact Patch for et-soc1-chip-diagram (index.html L7659–7664)

const view3d = {
  'die.metal': 'metal',
+ 'lib.wire': 'metal',
  'lib.finfet': 'finfet',
  'lib.fin': 'fin',
  'lib.channel': 'channel'
};
function panel(html) {
  const cur = Z.path[Z.path.length - 1];
- const v3 = cur && view3d[cur.id];
+ const selKid = SEL && SEL._kid && SEL._kid.split(':')[0];
+ const targetId = (selKid && view3d[selKid]) ? selKid : (cur && cur.id);
+ const v3 = targetId && view3d[targetId];
+ const fromHash = encodeURIComponent(pathHash());
  const link = v3
-   ? `<p class="v3d"><a href="https://spacesheep.dev/@yaroslavvb/et-soc1-in-3d#${v3}" target="_blank" rel="noopener">Explore this in 3D &rarr;</a></p>`
+   ? `<p class="v3d"><a href="https://spacesheep.dev/@yaroslavvb/et-soc1-in-3d?from=${fromHash}#${v3}" target="_blank" rel="noopener">Explore ${selKid && view3d[selKid] ? 'selected part' : 'this'} in 3D &rarr;</a></p>`
    : '';
  D.panel.innerHTML = (html || '') + link;
}

Companion Return-Link Handler in et-soc1-in-3d

// In et-soc1-in-3d: preserve caller's exact ladder branch (?from=...) if provided
const fromParam = new URLSearchParams(location.search).get('from');
const backHref = fromParam
  ? `https://spacesheep.dev/@yaroslavvb/et-soc1-chip-diagram#at=${fromParam}`
  : `https://spacesheep.dev/@yaroslavvb/et-soc1-chip-diagram#at=${view.defaultAt}`;