made some more improvements to the inference throughput illustration

app/src/content/chapters/3-experiments.mdx

@@ -5,19 +5,9 @@ import Glossary from "../../components/Glossary.astro";
 import FigRef from "../../components/FigRef.astro";
 import ReadingTime from "../../components/ReadingTime.astro";
 
-{/* TODO: read through entire blog post and make improvements */}
 {/* TODO: Integrate decay experiment as another analysis for proxy */}
 {/* TODO: share on a bunch of discords/slacks/hackernews/locallama */}
 {/* TODO: run variance experiments with pretraining from scratch */}
-{/* TODO: go through the blog post and update the scale numbers for finephrase dataset */}
-{/* TODO: brainstorm better banner, be artsy */}
-{/* TODO: banner idea: 1T tokens = 8M books
-5cm pro buech = 400km
-
-Denn chönntme die büecher ufenandstaple und d distanz zeige ufenere charte bspw. Oder mit öppis vergliiche.
-Oder für jedes buech en punkt mache
- */}
-{/* TODO: final configuration for finephrase at the end of infra section: visualization of how many pages (500 tokens) (use page emojis flying from left to right) we can generate (real time), user can configure with a slider the number of GPUs */}
 {/* TODO: baselines mixed with fw-edu-hq usually improve upon just baselines, but not sure if/how to present this */}
 
 {/*

app/src/content/chapters/5-infrastructure.mdx

@@ -427,9 +427,7 @@ With a trillion-parameter model you won't be generating billions of tokens per h
 
 {/*
 Further improvement ideas:
-- add a second model below so we can compare. Suggest something cool for the numbers below.
-- Also add some animations (page turning, flapping books,  bookshelfes books coming in and out)
-- Clean it up a bit to make it less cluttered
+- add a second model below so we can compare.
 */}
 
 To get a feel for what these throughput numbers actually mean, <FigRef target="inference-throughput" /> lets you pick a model and scale up the number of GPUs. Each page represents roughly 500 tokens of generated text. At high enough throughput, pages roll up into books (500 pages each), and books into shelves (500 books each).

app/src/content/embeds/inference-throughput.html

@@ -78,7 +78,7 @@
     background-repeat: no-repeat;
     cursor: pointer;
   }
-  .canvas-row { display: flex; gap: 8px; align-items: stretch; }
+  .canvas-row { display: flex; gap: 8px; align-items: stretch; position: relative; z-index: 1; }
   .canvas-row .side-panel { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
   .canvas-wrap {
     position: relative;
@@ -95,13 +95,13 @@
     border: 0;
     background: transparent;
   }
-  .slider-area { position: relative; width: 100%; margin-bottom: 8px; isolation: isolate; z-index: 20; }
+  .slider-area { position: relative; width: 100%; margin-bottom: 8px; z-index: 9999; }
   .slider-area input[type=range] { position: relative; z-index: 3; width: 100%; margin: 0; display: block; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; outline: none; cursor: pointer; }
   .slider-area input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand); cursor: pointer; margin-top: -5px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
   .slider-area input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--brand); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
 
-  .landmark-row { position: relative; width: 100%; height: 16px; z-index: 1; }
-  .landmark { position: absolute; transform: translateX(-50%); cursor: pointer; display: flex; flex-direction: column; align-items: center; z-index: 30; }
+  .landmark-row { position: relative; width: 100%; height: 16px; }
+  .landmark { position: absolute; transform: translateX(-50%); cursor: pointer; display: flex; flex-direction: column; align-items: center; }
   .landmark-row.top .landmark { bottom: 0; }
   .landmark-row.bottom .landmark { top: 0; }
   .landmark .tick { width: 2px; height: 5px; flex-shrink: 0; }
@@ -112,8 +112,8 @@
   .landmark-row.top .name { color: var(--training); }
   .landmark-row.bottom .tick { background: var(--brand); }
   .landmark-row.bottom .name { color: var(--brand); }
-  #row-a1, #row-b1 { z-index: 2; }
-  #row-a2, #row-b2 { z-index: 1; }
+  #row-a1 .landmark, #row-b1 .landmark { z-index: 2; }
+  #row-a2 .landmark, #row-b2 .landmark { z-index: 1; }
   #row-a2 .landmark .tick,
   #row-b2 .landmark .tick { position: relative; }
   #row-a2 .landmark .tick::after {
@@ -142,22 +142,25 @@
   }
 
   .landmark .tooltip { display: none; position: absolute; left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 12px; padding: 10px 14px; border-radius: 8px; width: 300px; white-space: normal; z-index: 2147483647; pointer-events: none; line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
-  .landmark-row.top .tooltip { bottom: calc(100% + 4px); }
+  .landmark-row.top .tooltip { top: calc(100% + 4px); }
   .landmark-row.bottom .tooltip { top: calc(100% + 4px); }
   .landmark .tooltip::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 5px solid transparent; }
   .landmark .tooltip.tip-right::after { left: auto; right: 16px; transform: none; }
   .landmark .tooltip.tip-left::after { left: 16px; transform: none; }
-  .landmark-row.top .tooltip::after { top: 100%; border-top-color: var(--tooltip-bg); }
+  .landmark-row.top .tooltip::after { bottom: 100%; border-bottom-color: var(--tooltip-bg); }
   .landmark-row.bottom .tooltip::after { bottom: 100%; border-bottom-color: var(--tooltip-bg); }
+  .landmark-row:has(.landmark:hover) { z-index: 99999; position: relative; }
   .landmark:hover .tooltip { display: block; }
 
   .throughput-strip {
+    position: absolute;
+    bottom: 4px;
+    left: 10px;
     width: calc(32% - 10px);
-    min-width: 190px;
-    margin: 6px 0 10px 10px;
+    min-width: 160px;
     padding: 0;
     text-align: center;
-    font-size: 14px;
+    font-size: 11px;
     color: #1f2937;
     font-weight: 700;
     font-variant-numeric: tabular-nums;
@@ -171,27 +174,27 @@
   .output-panel {
     position: absolute;
     right: 10px;
-    top: 50%;
+    top: calc(50%);
     transform: translateY(-50%);
     z-index: 4;
     pointer-events: none;
     display: flex;
     flex-direction: column;
-    gap: 4px;
-    padding: 10px 9px;
-    border-radius: 10px;
+    gap: 2px;
+    padding: 7px 8px;
+    border-radius: 8px;
     border: 1px solid var(--border);
     background: color-mix(in srgb, var(--surface) 88%, transparent);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
   }
   .output-heading {
     text-align: left;
-    font-size: 11px;
+    font-size: 10px;
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.6px;
     font-weight: 700;
-    margin-bottom: 2px;
+    margin-bottom: 1px;
   }
   .output-stats {
     display: grid;
@@ -206,7 +209,7 @@
   }
   .output-num {
     text-align: right;
-    font-size: 40px;
+    font-size: 32px;
     line-height: 1;
     font-weight: 700;
     color: var(--brand);
@@ -223,22 +226,23 @@
     letter-spacing: 0.2px;
   }
   .output-unit-emoji {
-    font-size: 20px;
+    font-size: 17px;
     line-height: 1;
   }
 
-  .datasets { margin-top: 12px; width: 100%; }
-  .datasets-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; text-align: center; margin-bottom: 6px; }
-  .dataset-bars { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
-  .dataset-item { display: flex; align-items: center; gap: 5px; font-size: 13px; min-width: 140px; position: relative; cursor: pointer; }
+  .datasets { min-width: 180px; display: flex; flex-direction: column; justify-content: center; }
+  .datasets-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
+  .dataset-bars { display: flex; flex-direction: column; gap: 4px; }
+  .dataset-item { display: flex; align-items: center; gap: 5px; font-size: 12px; position: relative; cursor: pointer; }
   .dataset-item .ds-check { font-size: 15px; width: 18px; text-align: center; }
   .dataset-item .ds-name { font-weight: 600; color: var(--text-strong); }
   .dataset-item .ds-time { color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }
   .dataset-item .ds-size { color: var(--text-faint); font-size: 11px; }
   .dataset-item.done .ds-name { color: var(--success); }
   .dataset-item.done .ds-time { color: var(--success); }
-  .dataset-item .ds-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 12px; padding: 10px 14px; border-radius: 8px; width: 260px; white-space: normal; z-index: 2147483647; pointer-events: none; line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
-  .dataset-item .ds-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--tooltip-bg); }
+  .dataset-item .ds-tip { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--tooltip-bg); color: var(--tooltip-text); font-size: 12px; padding: 10px 14px; border-radius: 8px; width: 260px; white-space: normal; z-index: 2147483647; pointer-events: none; line-height: 1.45; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
+  .dataset-item .ds-tip::after { content: ''; position: absolute; bottom: 100%; left: 20px; border: 5px solid transparent; border-bottom-color: var(--tooltip-bg); }
+  .dataset-item:hover { z-index: 99999; }
   .dataset-item:hover .ds-tip { display: block; }
 
   @media (max-width: 980px) {
@@ -248,8 +252,8 @@
     .throughput-strip {
       width: auto;
       min-width: 0;
-      margin: 6px 8px 8px;
-      font-size: 13px;
+      left: 8px;
+      font-size: 10px;
       text-align: center;
     }
     .output-panel {
@@ -264,7 +268,9 @@
     .output-unit { font-size: 11px; min-width: 3ch; }
     .output-unit-emoji { font-size: 16px; }
     .output-heading { font-size: 10px; }
-    .dataset-item { font-size: 12px; min-width: 170px; }
+    .datasets { max-width: 100%; min-width: 0; }
+    .dataset-bars { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
+    .dataset-item { font-size: 12px; }
   }
 </style>
 </head>
@@ -283,28 +289,28 @@
       <div class="control-group">
         <label>Model</label>
         <select id="model">
-          <option value="45540">SmolLM2-135M (45,540 tps/gpu)</option>
-          <option value="8086">Qwen3-4B (8,086 tps/gpu)</option>
-          <option value="6443">Qwen3-8B (6,443 tps/gpu)</option>
-          <option value="6117">GPT-OSS-120B (6,117 tps/gpu)</option>
-          <option value="1724">Gemma-3-27B (1,724 tps/gpu)</option>
+          <option value="45540">SmolLM2-135M</option>
+          <option value="8086">Qwen3-4B</option>
+          <option value="6443">Qwen3-8B</option>
+          <option value="6117">GPT-OSS-120B</option>
+          <option value="1724">Gemma-3-27B</option>
         </select>
       </div>
     </div>
     <div class="canvas-wrap">
       <div class="canvas-stage">
         <canvas id="c"></canvas>
-        <div class="output-panel">
-          <div class="output-heading">Generated</div>
-          <div class="output-stats">
-            <div class="output-line">
-              <span class="output-num" id="totalTokensNum">0</span>
-              <span class="output-unit output-unit-text">toks</span>
-            </div>
-            <div class="output-line">
-              <span class="output-num" id="totalItemNum">0</span>
-              <span class="output-unit output-unit-emoji" id="totalItemUnit">📄</span>
-            </div>
+      </div>
+      <div class="output-panel">
+        <div class="output-heading">Generated</div>
+        <div class="output-stats">
+          <div class="output-line">
+            <span class="output-num" id="totalTokensNum">0</span>
+            <span class="output-unit output-unit-text">toks</span>
+          </div>
+          <div class="output-line">
+            <span class="output-num" id="totalItemNum">0</span>
+            <span class="output-unit output-unit-emoji" id="totalItemUnit">📄</span>
           </div>
         </div>
       </div>
@@ -313,17 +319,16 @@
         <span class="tps" id="tpsInline">(0 TPS)</span>
       </div>
     </div>
-  </div>
-
-  <div class="datasets">
-    <div class="datasets-title">Time to generate dataset at current throughput</div>
-    <div class="dataset-bars" id="datasetBars"></div>
+    <div class="datasets">
+      <div class="datasets-title">Time to generate dataset<br>at current throughput</div>
+      <div class="dataset-bars" id="datasetBars"></div>
+    </div>
   </div>
 </div>
 
 <script>
   const canvas = document.getElementById('c');
-  const ctx = canvas.getContext('2d');
+  let ctx = canvas.getContext('2d');
 
   function resizeCanvas() {
     const w = canvas.clientWidth;
@@ -349,14 +354,10 @@
   const DATASETS = [
     { name: 'BookCorpus', tokens: 1e9,
       desc: '<b>BookCorpus</b> (2015)<br>11K unpublished books scraped from smashwords.com. Used to train the original BERT and GPT-1.' },
-    { name: 'Wikipedia', tokens: 4.3e9,
-      desc: '<b>English Wikipedia</b><br>All articles from en.wikipedia.org. A staple ingredient in virtually every LLM pretraining mix.' },
-    { name: 'C4', tokens: 156e9,
-      desc: '<b>C4</b> (Colossal Clean Crawled Corpus, 2020)<br>Cleaned version of Common Crawl used to train T5. Aggressive filtering removed 99% of the raw crawl.' },
+    { name: 'Wikipedia', tokens: 6e9,
+      desc: '<b>Multilingual Wikipedia</b><br>All articles across all 300+ language editions. ~4.7B words, ~6B tokens. A staple ingredient in virtually every LLM pretraining mix.' },
     { name: 'FinePhrase', tokens: 1e12,
       desc: '<b>FinePhrase</b> (Hugging Face, 2026)<br>1T tokens of LLM-rephrased web text. Synthetic data that teaches small models to punch above their weight.' },
-    { name: 'FineWeb', tokens: 15e12,
-      desc: '<b>FineWeb</b> (Hugging Face, 2024)<br>15T tokens of deduplicated, quality-filtered Common Crawl. The largest open pretraining dataset.' },
     { name: 'RedPajama', tokens: 100e12,
       desc: '<b>RedPajama v2</b> (Together AI, 2023)<br>100T raw tokens from 84 Common Crawl snapshots with quality signals. Covers 5 languages.' },
     { name: 'Common Crawl', tokens: 3e15,
@@ -507,8 +508,8 @@
   const dsEls = DATASETS.map(ds => {
     const el = document.createElement('div');
     el.className = 'dataset-item';
-    if (ds.name === 'FineWeb') el.style.order = '99';
-    el.innerHTML = '<span class="ds-check">\u23f3</span><span class="ds-name">' + ds.name + '</span><span class="ds-time">-</span><span class="ds-size">(' + formatNumInt(ds.tokens) + ' tok)</span><div class="ds-tip">' + ds.desc + '</div>';
+
+    el.innerHTML = '<span class="ds-check">\u23f3</span><span class="ds-name">' + ds.name + '</span><span class="ds-time">-</span><span class="ds-size">(' + formatNumInt(ds.tokens) + ' toks)</span><div class="ds-tip">' + ds.desc + '</div>';
     datasetBarsEl.appendChild(el);
     return el;
   });
@@ -560,7 +561,9 @@
   function getW() { return canvas.width; }
   function getH() { return canvas.height; }
 
-  // Hardware display: GPU → node → rack → superpod → cluster grid
+  // Per-frame cached state to avoid recomputing in nested draw calls
+  let _fNow = 0, _fPps = 0, _fFanPhase = 0, _fBlinkSpeed = 0;
+
   function getHardwareLevel(gpus) {
     if (gpus < GPUS_PER_NODE) return 'gpu';
     if (gpus < GPUS_PER_RACK) return 'node';
@@ -568,33 +571,55 @@
     return 'cluster';
   }
 
+  // Offscreen buffer for hardware rendering
+  const hwCanvas = document.createElement('canvas');
+  const hwCtx = hwCanvas.getContext('2d');
+  let hwDirty = true, hwLastGpus = -1, hwLastW = 0, hwLastH = 0;
+  gpuSlider.addEventListener('input', () => { hwDirty = true; });
+  modelSelect.addEventListener('change', () => { hwDirty = true; });
+
   function drawHardware() {
     const W = getW(), H = getH();
     const gpus = getGpuCount();
-    const labelH = 40;
-    const aw = W * 0.32, ah = H - 20 - labelH, ax = 10, ay = 10 + labelH;
-    const level = getHardwareLevel(gpus);
-
-    // GPU count label above hardware
-    ctx.fillStyle = themeTokens.brand;
-    ctx.font = 'bold 32px system-ui, sans-serif';
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'top';
-    ctx.fillText(formatGpuLabel(gpus), ax + aw / 2, 8);
-    ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic';
-
-    if (level === 'gpu') {
-      drawGpuGrid(gpus, ax, ay, aw, ah);
-    } else if (level === 'node') {
-      const nodeCount = Math.max(1, Math.round(gpus / GPUS_PER_NODE));
-      drawNodeGrid(nodeCount, ax, ay, aw, ah);
-    } else if (level === 'rack') {
-      const rackCount = Math.max(1, Math.round(gpus / GPUS_PER_RACK));
-      drawRackGrid(rackCount, ax, ay, aw, ah);
-    } else {
-      const pods = Math.round(gpus / GPUS_PER_SUPERPOD);
-      drawPodGrid(pods, ax, ay, aw, ah);
+
+    // Only re-render hardware if config or size changed, or animation needs update
+    const needsAnim = _fPps > 0;
+    if (hwCanvas.width !== W * 0.34 || hwCanvas.height !== H) {
+      hwCanvas.width = Math.ceil(W * 0.34);
+      hwCanvas.height = H;
+      hwDirty = true;
     }
+    // Animated hardware (fans/LEDs) redraws every frame when running
+    if (gpus !== hwLastGpus || hwDirty || needsAnim) {
+      hwLastGpus = gpus; hwDirty = false;
+      const prevCtx = ctx;
+      ctx = hwCtx;
+      ctx.clearRect(0, 0, hwCanvas.width, hwCanvas.height);
+
+      const pad = 10;
+      const aw = hwCanvas.width - 2 * pad, ax = pad;
+      const level = getHardwareLevel(gpus);
+
+      // GPU count label pinned to top
+      ctx.fillStyle = themeTokens.brand;
+      ctx.font = 'bold 22px system-ui, sans-serif';
+      ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+      ctx.fillText(formatGpuLabel(gpus), ax + aw / 2, 6);
+
+      // Hardware illustration centered vertically in remaining space (shifted down)
+      const labelBottom = 32;
+      const ah = hwCanvas.height * 0.65;
+      const ay = labelBottom + (hwCanvas.height - labelBottom - ah) / 2 + hwCanvas.height * 0.04;
+      ctx.textAlign = 'start'; ctx.textBaseline = 'alphabetic';
+
+      if (level === 'gpu') drawGpuGrid(gpus, ax, ay, aw, ah);
+      else if (level === 'node') drawNodeGrid(Math.max(1, Math.round(gpus / GPUS_PER_NODE)), ax, ay, aw, ah);
+      else if (level === 'rack') drawRackGrid(Math.max(1, Math.round(gpus / GPUS_PER_RACK)), ax, ay, aw, ah);
+      else drawPodGrid(Math.round(gpus / GPUS_PER_SUPERPOD), ax, ay, aw, ah);
+
+      ctx = prevCtx;
+    }
+    ctx.drawImage(hwCanvas, 0, 0);
   }
 
   function drawGpuGrid(count, ax, ay, aw, ah) {
@@ -608,7 +633,7 @@
     const gh = gw / 0.6;
     const offX = ax + (aw - (cols * gw + (cols - 1) * gap)) / 2;
     const offY = ay + (ah - (rows * gh + (rows - 1) * gap)) / 2;
-    const fanSpeed = (performance.now() / 200) * Math.min(getPps(), 100);
+    const fanSpeed = _fFanPhase;
     for (let i = 0; i < count; i++) {
       const c = i % cols, r = Math.floor(i / cols);
       drawSingleGpu(offX + c * (gw + gap), offY + r * (gh + gap), gw, gh, fanSpeed + i * 0.5);
@@ -664,15 +689,18 @@
     ctx.beginPath(); ctx.roundRect(nx, ny, nw, nh, 4); ctx.stroke();
     const slotW = (nw - 20) / 8, slotH = nh * 0.6;
     const slotY = ny + (nh - slotH) / 2;
-    const fanPhase = (performance.now() / 200) * Math.min(getPps(), 100);
     for (let i = 0; i < 8; i++) {
       const sx = nx + 10 + i * slotW;
-      drawSingleGpu(sx + 1, slotY, slotW - 2, slotH, fanPhase + i * 0.5);
+      drawSingleGpu(sx + 1, slotY, slotW - 2, slotH, _fFanPhase + i * 0.5);
     }
+    const ledAlpha = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(_fNow / (300 - _fBlinkSpeed * 1.2)));
+    ctx.globalAlpha = ledAlpha;
     ctx.fillStyle = '#4ade80';
     ctx.beginPath(); ctx.arc(nx + 8, ny + 8, 3, 0, Math.PI * 2); ctx.fill();
+    ctx.globalAlpha = 0.4 + 0.6 * (0.5 + 0.5 * Math.sin(_fNow / (400 - _fBlinkSpeed) + 1.5));
     ctx.fillStyle = '#60a5fa';
     ctx.beginPath(); ctx.arc(nx + 18, ny + 8, 3, 0, Math.PI * 2); ctx.fill();
+    ctx.globalAlpha = 1;
   }
 
   // Grid of racks
@@ -698,7 +726,6 @@
     const nodeCount = 4, pad = 4, gap = 3;
     const nodeH = (rh - 2 * pad - (nodeCount - 1) * gap) / nodeCount;
     const nodeW = rw - 2 * pad;
-    const fanPhase = (performance.now() / 200) * Math.min(getPps(), 100);
     for (let n = 0; n < nodeCount; n++) {
       const ny = ry + pad + n * (nodeH + gap), nx = rx + pad;
       ctx.fillStyle = '#1a1a2e';
@@ -713,14 +740,17 @@
         const fr = Math.min((slotW - 1) * 0.35, (nodeH - 4) * 0.25);
         if (fr > 1) {
           ctx.beginPath(); ctx.arc(fcx, fcy, fr, 0, Math.PI * 2); ctx.fillStyle = '#444'; ctx.fill();
-          ctx.save(); ctx.translate(fcx, fcy); ctx.rotate(fanPhase + g * 0.3 + n);
+          ctx.save(); ctx.translate(fcx, fcy); ctx.rotate(_fFanPhase + g * 0.3 + n);
           for (let b = 0; b < 4; b++) { ctx.rotate(Math.PI / 2); ctx.beginPath(); ctx.moveTo(0, 0);
             ctx.lineTo(fr * 0.8, fr * 0.3); ctx.lineTo(fr * 0.8, -fr * 0.3); ctx.fillStyle = '#666'; ctx.fill(); }
           ctx.restore();
         }
       }
+      const rackLedAlpha = 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(_fNow / (350 - _fBlinkSpeed) + n * 1.2));
+      ctx.globalAlpha = rackLedAlpha;
       ctx.fillStyle = '#4ade80';
       ctx.beginPath(); ctx.arc(nx + nodeW - 6, ny + nodeH / 2, Math.min(2, nodeH * 0.15), 0, Math.PI * 2); ctx.fill();
+      ctx.globalAlpha = 1;
     }
   }
 
@@ -759,9 +789,23 @@
     ctx.beginPath(); ctx.roundRect(x, y, nw, nh, r); ctx.stroke();
     if (nw < 4) return;
     const lr = Math.max(0.8, Math.min(2, nw * 0.06)), ly = y + nh * 0.2;
-    ctx.fillStyle = '#4ade80'; ctx.beginPath(); ctx.arc(x + nw * 0.2, ly, lr, 0, Math.PI * 2); ctx.fill();
-    if (nw >= 8) { ctx.fillStyle = '#60a5fa'; ctx.beginPath(); ctx.arc(x + nw * 0.4, ly, lr, 0, Math.PI * 2); ctx.fill(); }
-    if (nw >= 6) { ctx.fillStyle = '#c4a020'; ctx.beginPath(); ctx.arc(x + nw * 0.6, ly, lr, 0, Math.PI * 2); ctx.fill(); }
+    // Skip per-unit LED animation for large grids (> 64 pods) to save draw calls
+    if (total > 64) {
+      ctx.fillStyle = '#4ade80'; ctx.beginPath(); ctx.arc(x + nw * 0.2, ly, lr, 0, Math.PI * 2); ctx.fill();
+    } else {
+      const podHash = (x * 31 + y * 17) & 0xffff;
+      ctx.globalAlpha = 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(_fNow / (400 - _fBlinkSpeed) + podHash));
+      ctx.fillStyle = '#4ade80'; ctx.beginPath(); ctx.arc(x + nw * 0.2, ly, lr, 0, Math.PI * 2); ctx.fill();
+      if (nw >= 8) {
+        ctx.globalAlpha = 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(_fNow / (350 - _fBlinkSpeed) + podHash + 2));
+        ctx.fillStyle = '#60a5fa'; ctx.beginPath(); ctx.arc(x + nw * 0.4, ly, lr, 0, Math.PI * 2); ctx.fill();
+      }
+      if (nw >= 6) {
+        ctx.globalAlpha = 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(_fNow / (300 - _fBlinkSpeed) + podHash + 4));
+        ctx.fillStyle = '#c4a020'; ctx.beginPath(); ctx.arc(x + nw * 0.6, ly, lr, 0, Math.PI * 2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    }
     if (nw >= 10) {
       const vy = y + nh * 0.45, vh = nh * 0.4, lc = Math.min(6, Math.floor(nw / 4));
       ctx.strokeStyle = '#333'; ctx.lineWidth = 0.5;
@@ -778,32 +822,59 @@
 
   const EMOJI = { page: '\u{1F4C4}', book: '\u{1F4D6}', shelf: '\u{1F4DA}' };
   const EMOJI_SIZE = { page: 28, book: 34, shelf: 40 };
-
-  function drawItem(p) {
-    const W = getW();
-    const fadeStart = W - W * 0.1;
+  const MAX_FLOATING = 150;
+
+  // Pre-render emojis at multiple scales to offscreen canvases
+  const emojiCache = {};
+  function getEmojiCanvas(type, scale) {
+    const sz = Math.round(EMOJI_SIZE[type] * scale);
+    const key = type + '_' + sz;
+    if (emojiCache[key]) return emojiCache[key];
+    const off = document.createElement('canvas');
+    off.width = sz + 4; off.height = sz + 4;
+    const octx = off.getContext('2d');
+    octx.font = sz + 'px system-ui, sans-serif';
+    octx.textBaseline = 'top';
+    octx.fillText(EMOJI[type], 2, 2);
+    emojiCache[key] = off;
+    return off;
+  }
+
+  function drawItem(p, now, W) {
+    const fadeStart = W * 0.9;
     const alpha = p.x > fadeStart ? 1 - (p.x - fadeStart) / (W - fadeStart) : 1;
+    const off = getEmojiCanvas(p.type, p.scale);
+    const bobY = p.y + Math.sin(now / 600 + p.bobPhase) * p.bobAmp;
+    const angle = Math.sin(now / 400 + p.wobblePhase) * p.wobbleAmp;
     ctx.globalAlpha = alpha;
-    const sz = EMOJI_SIZE[p.type];
-    ctx.font = sz + 'px system-ui, sans-serif';
-    ctx.textBaseline = 'top';
-    ctx.fillText(EMOJI[p.type], p.x, p.y);
+    ctx.save();
+    ctx.translate(p.x + off.width / 2, bobY + off.height / 2);
+    ctx.rotate(angle);
+    ctx.drawImage(off, -off.width / 2, -off.height / 2);
+    ctx.restore();
     ctx.globalAlpha = 1;
   }
 
   function spawnItem() {
     const H = getH(), W = getW();
     const spawnX = W * 0.34;
-    const yMin = 30, yMax = H - 60, y = yMin + Math.random() * (yMax - yMin);
+    const margin = H * 0.12;
+    const yMin = margin + H * 0.04, yMax = H - margin + H * 0.04, y = yMin + Math.random() * (yMax - yMin);
     const mode = getVisualMode();
     const pps = getPps();
     const pagesPerShelf = PAGES_PER_BOOK * BOOKS_PER_SHELF;
     const rate = mode === 'shelf' ? pps / pagesPerShelf : mode === 'book' ? pps / PAGES_PER_BOOK : pps;
     const bs = 0.8 + Math.log10(Math.max(1, rate)) * 0.8;
     const tokens = mode === 'shelf' ? TOKENS_PER_SHELF : mode === 'book' ? TOKENS_PER_BOOK : TOKENS_PER_PAGE;
+    const scale = 0.85 + Math.random() * 0.3;
+    const bobAmp = 3 + Math.random() * 5;
+    const bobPhase = Math.random() * Math.PI * 2;
+    const wobbleAmp = mode === 'page' ? 0.08 + Math.random() * 0.12 : 0.04 + Math.random() * 0.06;
+    const wobblePhase = Math.random() * Math.PI * 2;
+    const depthSpeed = (bs + Math.random() * bs) * (0.7 + scale * 0.6);
     floatingItems.push({
-      x: spawnX + Math.random() * 20, y, speed: bs + Math.random() * bs,
-      type: mode, tokens
+      x: spawnX + Math.random() * 20, y, speed: depthSpeed,
+      type: mode, tokens, scale, bobAmp, bobPhase, wobbleAmp, wobblePhase
     });
   }
 
@@ -811,29 +882,41 @@
     const dt = Math.min((now - lastTime) / 1000, 0.1); lastTime = now;
     const W = getW(), H = getH();
 
+    // Cache per-frame values for nested draw calls
+    _fNow = now;
+    _fPps = getPps();
+    _fFanPhase = (now / 200) * Math.min(_fPps, 100);
+    _fBlinkSpeed = Math.min(_fPps, 200);
+
     ctx.clearRect(0, 0, W, H);
     ctx.fillStyle = themeTokens.canvasBg; ctx.fillRect(0, 0, W, H);
 
     const spawnX = W * 0.34;
     ctx.strokeStyle = themeTokens.canvasGrid; ctx.lineWidth = 1; ctx.setLineDash([4, 8]);
-    for (let y = 60; y < H - 30; y += 40) { ctx.beginPath(); ctx.moveTo(spawnX, y); ctx.lineTo(W - 20, y); ctx.stroke(); }
+    const gridMargin = H * 0.12;
+    const gridOffset = H * 0.04;
+    for (let y = gridMargin + gridOffset; y < H - gridMargin + gridOffset; y += 40) { ctx.beginPath(); ctx.moveTo(spawnX, y); ctx.lineTo(W - 20, y); ctx.stroke(); }
     ctx.setLineDash([]);
 
-    const pps = getPps(), mode = getVisualMode();
+    const pps = _fPps, mode = getVisualMode();
     const pagesPerShelf = PAGES_PER_BOOK * BOOKS_PER_SHELF;
     const spawnRate = mode === 'shelf' ? Math.min(pps / pagesPerShelf, 60) : mode === 'book' ? Math.min(pps / PAGES_PER_BOOK, 120) : Math.min(pps, 400);
     spawnAccum += spawnRate * dt;
-    while (spawnAccum >= 1) { spawnItem(); spawnAccum -= 1; }
-
-    for (let i = floatingItems.length - 1; i >= 0; i--) {
-      floatingItems[i].x += floatingItems[i].speed;
-      if (floatingItems[i].x > W + 40) {
-        totalTokens += floatingItems[i].tokens;
-        floatingItems.splice(i, 1);
+    while (spawnAccum >= 1 && floatingItems.length < MAX_FLOATING) { spawnItem(); spawnAccum -= 1; }
+    if (floatingItems.length >= MAX_FLOATING) spawnAccum = 0;
+
+    let writeIdx = 0;
+    for (let i = 0; i < floatingItems.length; i++) {
+      const p = floatingItems[i];
+      p.x += p.speed;
+      if (p.x > W + 40) {
+        totalTokens += p.tokens;
         continue;
       }
-      drawItem(floatingItems[i]);
+      drawItem(p, now, W);
+      floatingItems[writeIdx++] = p;
     }
+    floatingItems.length = writeIdx;
 
     drawHardware();