Waleed — Adom Molecule LED Nameplate

@@ -23,6 +23,18 @@              background:var(--surface); margin:22px 0 8px;              box-shadow:0 12px 40px rgba(0,0,0,.45); }   .viewer iframe { display:block; width:100%; height:620px; border:0; }+  /* Click to load. The viewer bundle is ~13 MB of Babylon plus a 2.5 MB model;+     loading it eagerly on a page most people are just reading makes the whole+     tab crawl, and four of these tabs will peg a browser. */+  .poster { display:block; width:100%; padding:0; border:0; background:none;+             cursor:pointer; position:relative; font:inherit; color:inherit; }+  .poster img { display:block; width:100%; height:auto; opacity:.55; transition:opacity .18s; }+  .poster:hover img { opacity:.75; }+  .play { position:absolute; inset:0; display:flex; flex-direction:column;+           align-items:center; justify-content:center; gap:6px; text-align:center; }+  .play b { background:var(--accent); color:#04120f; padding:10px 20px;+             border-radius:999px; font-size:15px; font-weight:700; }+  .play i { color:var(--text); font-style:normal; font-size:12.5px; opacity:.85; }   .cap { color:var(--muted); font-size:13px; margin:0 0 26px; }   .cap a { color:var(--accent); text-decoration:none; }   table { border-collapse:collapse; width:100%; margin:12px 0 4px; font-size:14px; }@@ -42,14 +54,14 @@ <p class="lede">An Adom molecule LED nameplate. The name is etched out of the soldermask over the ground plane, lit by 14 side-view LEDs firing inward across the board.</p> -<div class="viewer">-  <iframe src="https://wiki.adom.inc/adom/waleed-nameplate/render/viewer/index.html"-          title="Waleed nameplate, interactive 3D" loading="lazy"-          allow="fullscreen"></iframe>+<div class="viewer" id="viewer">+  <button class="poster" id="viewer-load" type="button">+    <img src="https://wiki.adom.inc/adom/waleed-nameplate/render/docs/hero.png" alt="Waleed nameplate">+    <span class="play"><b>Load interactive 3D viewer</b><i>Orbit, inspect, measure, x-ray the copper. About 15 MB.</i></span>+  </button> </div>-<p class="cap">Interactive board viewer. The guided walkthrough starts on its own; drag to orbit,-and use the toolbar for Inspect, Measure and the x-ray Nets view.-<a href="https://wiki.adom.inc/adom/waleed-nameplate/render/viewer/index.html" target="_blank">Open full screen</a>.</p>+<p class="cap">The guided walkthrough starts on its own once loaded.+<a href="https://wiki.adom.inc/adom/waleed-nameplate/render/viewer/index.html" target="_blank">Open full screen instead</a>.</p>  <div class="call"><b>The one idea: the name is the ground plane.</b> A rectangular GND copper pour covers the top layer and the soldermask is opened in the@@ -145,6 +157,18 @@ from the name's ink box, so a new name is one command:</p>   // default frame height and everything below the 3D viewer is unreachable.   var wrap = document.getElementById('wrap');   var last = 0;+  var btn = document.getElementById('viewer-load');+  if (btn) btn.addEventListener('click', function () {+    var f = document.createElement('iframe');+    f.src = 'https://wiki.adom.inc/adom/waleed-nameplate/render/viewer/index.html';+    f.title = 'Waleed nameplate, interactive 3D';+    f.setAttribute('allow', 'fullscreen');+    f.addEventListener('load', post);+    var host = document.getElementById('viewer');+    host.innerHTML = '';+    host.appendChild(f);+    post();+  });   function post() {     var h = wrap.offsetHeight + 24;     if (h !== last) { last = h; parent.postMessage({ type: 'readme-height', height: h }, '*'); }