v2

index.html

@@ -771,12 +771,96 @@
   .k-ty { color: #6fb3ff; }
   .k-at { color: #ffb074; }
   .k-nu { color: #7ee787; }
+
+  /* explanation shown until a kernel is picked (swaps in/out with the source view) */
+  .kx-source { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+  .kx-source[hidden] { display: none; }
+  .kx-intro {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 34px 30px;
+  }
+  .kx-intro[hidden] { display: none; }
+  .kx-intro-inner {
+    max-width: 540px;
+    text-align: center;
+    animation: kxIntroRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  }
+
+  /* rainbow-shimmer icon — a slowly rotating conic ring + halo in the app's accent palette */
+  .kx-spark { position: relative; width: 60px; height: 60px; margin: 0 auto 24px; }
+  .kx-spark-ring {
+    position: absolute; inset: 0; border-radius: 50%;
+    background: conic-gradient(from 0deg, #ff7a6b, #ffcd6b, #64ffa0, #6fb3ff, #c792ea, #ff7a6b);
+    animation: kxSpin 6s linear infinite;
+  }
+  .kx-spark-ring::after { /* blurred halo that rotates with the ring → soft shimmer */
+    content: ""; position: absolute; inset: -7px; border-radius: 50%;
+    background: inherit; filter: blur(13px); opacity: 0.5;
+  }
+  .kx-spark-core { position: absolute; inset: 2px; border-radius: 50%; background: #0a0a0c; }
+  .kx-spark-icon { position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; color: #fff; }
+
+  .kx-intro-title {
+    font-family: var(--display);
+    font-weight: 400;
+    font-size: clamp(26px, 3vw, 34px);
+    line-height: 1.12;
+    color: #fff;
+    margin-bottom: 16px;
+  }
+  .kx-intro-lead {
+    font-size: 14.5px;
+    font-weight: 300;
+    line-height: 1.7;
+    color: var(--t2);
+    margin: 0 auto 26px;
+    max-width: 48ch;
+  }
+  .kx-points {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 13px;
+    text-align: left;
+    margin-bottom: 28px;
+  }
+  .kx-points li {
+    position: relative;
+    padding-left: 22px;
+    font-size: 13.5px;
+    line-height: 1.62;
+    color: var(--t2);
+  }
+  .kx-points li::before {
+    content: "";
+    position: absolute; left: 2px; top: 0.6em;
+    width: 6px; height: 6px; border-radius: 50%;
+  }
+  .kx-points li:nth-child(1)::before { background: #ff7a6b; box-shadow: 0 0 8px rgba(255, 122, 107, 0.7); }
+  .kx-points li:nth-child(2)::before { background: #6fb3ff; box-shadow: 0 0 8px rgba(111, 179, 255, 0.7); }
+  .kx-points li:nth-child(3)::before { background: #64ffa0; box-shadow: 0 0 8px rgba(100, 255, 160, 0.7); }
+  .kx-points b { color: var(--t1); font-weight: 600; }
+  .kx-intro-hint {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--t3);
+  }
+
   .kx-code::-webkit-scrollbar, .kx-list::-webkit-scrollbar { width: 10px; height: 10px; }
   .kx-code::-webkit-scrollbar-thumb, .kx-list::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid #0a0a0c; border-radius: 10px; }
   /* while the overlay is open, lock the page behind it so only the overlay's panes scroll */
   body.kx-locked { overflow: hidden; }
   @keyframes kxFade { from { opacity: 0; } to { opacity: 1; } }
   @keyframes kxRise { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }
+  @keyframes kxSpin { to { transform: rotate(360deg); } }
+  @keyframes kxIntroRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
 
   @media (max-width: 760px) {
     .kx { padding: 0; }
@@ -860,7 +944,7 @@
         <div class="hero-row anim">
           <div class="hero-main">
             <p class="hero-sub">
-              <b>Gemma&nbsp;4 E2B (QAT Mobile)</b> — effectively a 2.3B-parameter reasoning model — runs
+              <b>Gemma&nbsp;4 E2B (QAT Mobile)</b> — a powerful open-source model — runs
               fully on-device with WebGPU. Weights cache locally after the first load, and nothing you
               type ever leaves your machine.
             </p>
@@ -964,14 +1048,33 @@
       <div class="kx-body">
         <div class="kx-side"><div class="kx-list" id="kxList"></div></div>
         <div class="kx-view">
-          <div class="kx-view-head">
-            <span class="kx-name" id="kxName"></span>
-            <div class="kx-view-actions">
-              <span class="kx-lines" id="kxLines"></span>
-              <button class="kx-copy" id="kxCopy" type="button">Copy</button>
+          <div class="kx-intro" id="kxIntro">
+            <div class="kx-intro-inner">
+              <div class="kx-spark" aria-hidden="true">
+                <span class="kx-spark-ring"></span>
+                <span class="kx-spark-core"></span>
+                <svg class="kx-spark-icon" viewBox="0 0 20 20" fill="currentColor"><path d="M11.7858 1.66699C11.9437 1.66699 12.0957 1.72951 12.2074 1.84115C12.3189 1.95276 12.3815 2.10483 12.3815 2.2627V3.45247H15.3568C15.6725 3.45247 15.9767 3.57757 16.1999 3.80078C16.4231 4.02403 16.5482 4.32813 16.5482 4.64388V7.61914H17.738C17.8957 7.61914 18.0479 7.68181 18.1595 7.79329C18.2712 7.90491 18.3337 8.05698 18.3337 8.21484C18.3336 8.37247 18.2709 8.52323 18.1595 8.63477C18.0478 8.7464 17.8958 8.81055 17.738 8.81055H16.5482V11.1901H17.738C17.8958 11.1901 18.0478 11.2543 18.1595 11.3659C18.2709 11.4774 18.3336 11.6282 18.3337 11.7858C18.3337 11.9437 18.2712 12.0957 18.1595 12.2074C18.0479 12.3188 17.8957 12.3815 17.738 12.3815H16.5482V15.3568C16.5482 15.6725 16.4231 15.9767 16.1999 16.1999C15.9767 16.4231 15.6725 16.5482 15.3568 16.5482H12.3815V17.738C12.3815 17.8959 12.3188 18.0479 12.2074 18.1595C12.0957 18.271 11.9437 18.3337 11.7858 18.3337C11.6282 18.3336 11.4774 18.2707 11.3659 18.1595C11.2543 18.0478 11.1901 17.896 11.1901 17.738V16.5482H8.81055V17.738C8.81055 17.896 8.7464 18.0478 8.63477 18.1595C8.52323 18.2707 8.37247 18.3336 8.21484 18.3337C8.05698 18.3337 7.90491 18.271 7.79329 18.1595C7.68181 18.0479 7.61914 17.8958 7.61914 17.738V16.5482H4.64388C4.32813 16.5482 4.02403 16.4231 3.80078 16.1999C3.57756 15.9767 3.45247 15.6725 3.45247 15.3568V12.3815H2.2627C2.10485 12.3815 1.95276 12.3189 1.84115 12.2074C1.72951 12.0957 1.66699 11.9437 1.66699 11.7858C1.66708 11.6283 1.72987 11.4774 1.84115 11.3659C1.95276 11.2543 2.10483 11.1901 2.2627 11.1901H3.45247V8.81055H2.2627C2.10483 8.81055 1.95276 8.7464 1.84115 8.63477C1.72987 8.52324 1.66704 8.37243 1.66699 8.21484C1.66699 8.05698 1.72951 7.90491 1.84115 7.79329C1.95275 7.68175 2.1049 7.61914 2.2627 7.61914H3.45247V4.64388C3.45247 4.32813 3.57751 4.02403 3.80078 3.80078C4.02403 3.57753 4.32813 3.45247 4.64388 3.45247H7.61914V2.2627C7.61914 2.10488 7.68175 1.95275 7.79329 1.84115C7.90491 1.72951 8.05698 1.66699 8.21484 1.66699C8.37243 1.66704 8.52324 1.72987 8.63477 1.84115C8.7464 1.95276 8.81055 2.10481 8.81055 2.2627V3.45247H11.1901V2.2627C11.1901 2.10481 11.2543 1.95276 11.3659 1.84115C11.4774 1.72987 11.6283 1.66708 11.7858 1.66699ZM6.14616 5.31445C5.6863 5.31489 5.31445 5.68782 5.31445 6.14779V13.8529C5.31445 14.3131 5.68755 14.6862 6.14779 14.6862H13.8529C14.3131 14.6862 14.6862 14.3131 14.6862 13.8529V6.14779C14.6862 5.68755 14.3131 5.31445 13.8529 5.31445H6.14616Z" fill-opacity="0.4"></path><rect x="5.31348" y="5.31445" width="9.37256" height="9.37256" rx="0.833333" fill-opacity="0.15"></rect><path d="M8.19238 7.91225V12.254C8.19238 12.585 8.55699 12.7862 8.83777 12.606L12.2491 10.4351C12.3088 10.3973 12.358 10.3451 12.3921 10.2831C12.4262 10.2212 12.4441 10.1517 12.4441 10.081C12.4441 10.0103 12.4262 9.9408 12.3921 9.87889C12.358 9.81697 12.3088 9.76468 12.2491 9.72688L8.83777 7.56022C8.77456 7.51934 8.70149 7.49627 8.62626 7.49346C8.55103 7.49064 8.47644 7.50819 8.41035 7.54423C8.34426 7.58028 8.28913 7.6335 8.25077 7.69827C8.2124 7.76304 8.19223 7.83697 8.19238 7.91225Z" fill-opacity="0.8"></path></svg>
+              </div>
+              <h2 class="kx-intro-title">What are Kernels?</h2>
+              <p class="kx-intro-lead">Kernels are the low-level GPU programs that do the model's actual math — the matrix multiplications, attention, and normalization behind every token. And how well they're optimized can dramatically speed up inference.</p>
+              <ul class="kx-points">
+                <li><b>WebGPU &amp; WGSL.</b> Each kernel is a WebGPU compute shader, written in WGSL — the language that runs general-purpose math on the GPU — entirely locally in your browser.</li>
+                <li><b>Agentic Kernel Optimization.</b> Every kernel was generated by AI (in this case, Fable 5, before it was shut down), benchmarked on an Apple M4 Max, and refined through an evolutionary, genetic-style search toward the fastest version.</li>
+                <li><b>Blazingly Fast.</b> This means we are able to run Gemma 4 E2B at ~250 tokens/sec on an M4 Max, pushing your device to its limits.</li>
+              </ul>
+              <div class="kx-intro-hint">Select a kernel to read its real source</div>
+            </div>
+          </div>
+          <div class="kx-source" id="kxSource" hidden>
+            <div class="kx-view-head">
+              <span class="kx-name" id="kxName"></span>
+              <div class="kx-view-actions">
+                <span class="kx-lines" id="kxLines"></span>
+                <button class="kx-copy" id="kxCopy" type="button">Copy</button>
+              </div>
             </div>
+            <pre class="kx-code"><code id="kxCode"></code></pre>
           </div>
-          <pre class="kx-code"><code id="kxCode"></code></pre>
         </div>
       </div>
     </div>
@@ -1222,11 +1325,14 @@
         item.addEventListener("click", () => selectKernel(i));
         list.appendChild(item);
       });
-      if (kernels.length) selectKernel(0);
-      else { $("kxName").textContent = ""; $("kxLines").textContent = ""; $("kxCode").textContent = ""; kxCopySource = ""; }
+      // Open on the explanation, with no kernel selected — the source shows only once one is clicked.
+      [...list.children].forEach((el) => el.classList.remove("active"));
+      $("kxSource").hidden = true;
+      $("kxIntro").hidden = false;
+      kxCopySource = "";
       kernelsOverlay.hidden = false;
       document.body.classList.add("kx-locked");
-      $("kxList").scrollTop = 0;
+      list.scrollTop = 0;
       requestAnimationFrame(updateListFade);
     }
 
@@ -1241,6 +1347,8 @@
     function selectKernel(i) {
       const k = kernels[i];
       if (!k) return;
+      $("kxIntro").hidden = true;   // swap the explanation out for the source
+      $("kxSource").hidden = false;
       [...$("kxList").children].forEach((el, j) => el.classList.toggle("active", j === i));
       $("kxName").textContent = k.name;
       $("kxLines").textContent = `${k.source.split("\n").length} lines`;