Deploy neuropulse: 3D transformer visualizer + demo mode

README.md

@@ -1,10 +1,33 @@
 ---
-title: Neuropulse
-emoji: 💻
-colorFrom: pink
-colorTo: yellow
+title: Neuropulse — Watch a real transformer think
+emoji: 🧠
+colorFrom: blue
+colorTo: indigo
 sdk: static
-pinned: false
+pinned: true
+license: mit
+short_description: Live 3D rendering of Phi-3-mini, every pixel a real tensor
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Neuropulse
+
+A live 3D rendering of **Phi-3-mini** running as a hand-written WGSL/WebGPU
+inference engine. Every point of light is a real tensor — attention heads, FFN
+cells, residual norms — drawn one-to-one from the running model, not a video or
+an animation.
+
+## Two ways to explore
+
+- **Start learning now — no download.** The [`?demo=1`](./app/?demo=1) path
+  replays **real runs captured live earlier** (the recordings are committed
+  tensors, always badged "RECORDED RUN"). The full UI, guided lessons, tours,
+  and ablation experiments all work with nothing to install.
+- **Download & run live (~2 GB).** On a WebGPU-capable browser you can pull the
+  quantized weights and watch your *own* prompts run on your GPU. Close the tab
+  and the inference stops.
+
+Canonical site: **[neuropulse.live](https://neuropulse.live)**. This Space is a
+mirror.
+
+Built with vanilla TypeScript + Three.js over a from-scratch WGSL Phi-3 engine.
+No frameworks, no telemetry, no fakery.

assets/main-D1-Ogq2V.js

@@ -0,0 +1,61 @@
+import{W as E,S as L,P as B,B as R,a as C,C as u,b as Y,A as _,c as j}from"./three.module-Bwi0mW4U.js";(function(){const r=document.getElementById("page-canvas");if(!r||window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;const p=window.innerWidth<820||/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent),h=p?9e3:28e3,W=p?1.5:2,v=new E({canvas:r,antialias:!p,alpha:!0,powerPreference:"high-performance"});v.setPixelRatio(Math.min(window.devicePixelRatio,W));const w=new L,o=new B(55,1,.1,300);o.position.set(0,0,16);const l=new Float32Array(h*3),d=new Float32Array(h*3);for(let e=0;e<h;e++){const s=(Math.floor(Math.random()*32)/31-.5)*18,a=Math.pow(Math.random(),.7)*9+.5,m=Math.random()*Math.PI*2;l[e*3]=a*Math.cos(m),l[e*3+1]=s+(Math.random()-.5)*.4,l[e*3+2]=a*Math.sin(m)-4,d[e*3]=Math.random(),d[e*3+1]=Math.random(),d[e*3+2]=Math.random()}const f=new R;f.setAttribute("position",new C(l,3)),f.setAttribute("seed",new C(d,3));const c={time:{value:0},prog:{value:0},fade:{value:1},cyan:{value:new u(6220500)},cyanHot:{value:new u(58879)},violet:{value:new u(12616956)}},F=new Y({uniforms:c,transparent:!0,depthWrite:!1,blending:_,vertexShader:`
+      attribute vec3 seed;
+      uniform float time;
+      uniform float prog;
+      uniform float fade;
+      uniform vec3 cyan;
+      uniform vec3 cyanHot;
+      uniform vec3 violet;
+      varying vec3 vColor;
+      varying float vAlpha;
+
+      void main() {
+        vec3 p = position;
+        float t = time * 0.12;
+
+        // Volumetric drift (dominant in hero) fades as prog rises
+        float ph  = seed.x * 6.2831;
+        float ph2 = seed.y * 6.2831;
+        float amp = 0.5 + seed.z * 1.3;
+        float volWeight = mix(1.0, 0.35, prog);
+
+        p.x += sin(t + ph)                        * amp * volWeight;
+        p.y += cos(t * 0.8 + ph2)                 * amp * 0.35 * volWeight;
+        p.z += sin(t * 0.6 + ph + seed.y * 3.0)   * amp * 0.7  * volWeight;
+
+        // Leftward flow that ramps up as prog rises (mid-scroll onward)
+        float flowAmt = smoothstep(0.15, 0.85, prog);
+        float flowSpeed = (0.6 + seed.z * 1.4) * flowAmt;
+        float wrap = 36.0;
+        p.x = mod(p.x + wrap * 0.5 - time * flowSpeed, wrap) - wrap * 0.5;
+
+        vec4 mv = modelViewMatrix * vec4(p, 1.0);
+        gl_Position = projectionMatrix * mv;
+
+        // Slightly smaller points as flow tightens
+        float depth = -mv.z;
+        float baseSize = 1.0 + seed.z * 3.4;
+        gl_PointSize = baseSize * mix(1.0, 0.7, prog) * (90.0 / depth);
+
+        // Palette: mostly cyan, rare violet, rarest hot-cyan activity
+        float hot       = step(0.965, seed.x);
+        float violetMix = smoothstep(0.55, 0.95, seed.y);
+        vec3 base       = mix(cyan, violet, violetMix);
+        vColor          = mix(base, cyanHot, hot);
+
+        // Per-point breathing + depth fade + master alpha
+        float pulse = 0.55 + 0.45 * sin(t * 2.4 + seed.x * 18.0 + seed.y * 12.0);
+        vAlpha = pulse * smoothstep(40.0, 5.0, depth) * fade;
+      }
+    `,fragmentShader:`
+      varying vec3 vColor;
+      varying float vAlpha;
+      void main() {
+        vec2 uv = gl_PointCoord - 0.5;
+        float d = length(uv);
+        if (d > 0.5) discard;
+        float fall = smoothstep(0.5, 0.0, d);
+        fall = pow(fall, 1.4);
+        gl_FragColor = vec4(vColor * (1.0 + fall * 0.6), fall * vAlpha);
+      }
+    `}),g=new j(f,F);w.add(g);function y(){const e=window.innerWidth,i=window.innerHeight;v.setSize(e,i,!1),o.aspect=e/i,o.updateProjectionMatrix()}y(),window.addEventListener("resize",y);let M=0,x=0;window.addEventListener("pointermove",e=>{M=e.clientX/window.innerWidth*2-1,x=e.clientY/window.innerHeight*2-1},{passive:!0});let t=0,b=1;function n(e,i,s){const a=Math.max(0,Math.min(1,(s-e)/(i-e)));return a*a*(3-2*a)}function A(){const e=window.scrollY,i=Math.max(1,document.documentElement.scrollHeight-window.innerHeight);t=Math.max(0,Math.min(1,e/i));const s=1-n(.04,.15,t),a=n(.15,.25,t)*(1-n(.7,.78,t)),m=n(.78,.88,t)*(1-n(.93,.98,t)),H=n(.93,1,t);b=Math.max(s,.35+(1-a)*0,m*.85,H)}A(),window.addEventListener("scroll",A,{passive:!0});let P=!0;document.addEventListener("visibilitychange",()=>{P=document.visibilityState==="visible"}),r.style.opacity="0",r.style.transition="opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1)",requestAnimationFrame(()=>{r.style.opacity="1"});let S=0;function z(){if(P){S+=1/60,c.time.value=S,c.prog.value=t,c.fade.value=b;const e=1-Math.min(1,t*4);o.position.x+=(M*.7*e-o.position.x)*.03,o.position.y+=(-x*.5*e-o.position.y)*.03,o.lookAt(0,0,0),g.rotation.y+=6e-4*(1-t*.7),v.render(w,o)}requestAnimationFrame(z)}z()})();

index.html

@@ -1,19 +1,1361 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Neuropulse — Watch a real transformer think</title>
+<meta name="description" content="A live 3D rendering of Phi-3-mini running on your GPU. Every attention head, every FFN cell, every activation — drawn one-to-one from real WebGPU tensors. The whole model runs in your tab; close it and the inference stops." />
+<link rel="canonical" href="https://neuropulse.live/" />
+<link rel="icon" href="./favicon.ico" sizes="any" />
+<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32.png" />
+<link rel="icon" type="image/png" sizes="96x96" href="./favicon-96.png" />
+<link rel="icon" type="image/png" sizes="192x192" href="./favicon-192.png" />
+<link rel="apple-touch-icon" sizes="192x192" href="./favicon-192.png" />
+
+<!-- Open Graph -->
+<meta property="og:type" content="website" />
+<meta property="og:title" content="Neuropulse — Watch a real transformer think" />
+<meta property="og:description" content="Live 3D rendering of Phi-3-mini running on your GPU. Strict 1:1 from real WebGPU tensors." />
+<meta property="og:url" content="https://neuropulse.live/" />
+<meta property="og:image" content="https://neuropulse.live/og.png" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="Neuropulse — Watch a real transformer think" />
+<meta name="twitter:description" content="Live 3D rendering of Phi-3-mini running on your GPU. Strict 1:1 from real WebGPU tensors." />
+<meta name="twitter:image" content="https://neuropulse.live/og.png" />
+
+<!-- Structured data: identity + cross-links to the kernel-fusion research line. -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "WebSite",
+      "@id": "https://neuropulse.live#site",
+      "url": "https://neuropulse.live",
+      "name": "Neuropulse",
+      "description": "Live 3D rendering of Phi-3-mini running on your GPU. Every tensor drawn one-to-one from real WebGPU activations.",
+      "publisher": { "@id": "https://neuropulse.live#author" },
+      "isPartOf": {
+        "@type": "CreativeWork",
+        "name": "Kernel-fusion research line",
+        "url": "https://kernelfusion.dev"
+      }
+    },
+    {
+      "@type": "Person",
+      "@id": "https://neuropulse.live#author",
+      "name": "Ahmet Baris Gunaydin",
+      "url": "https://barisgunaydin.com",
+      "sameAs": [
+        "https://barisgunaydin.com",
+        "https://kernelfusion.dev",
+        "https://gpubench.dev",
+        "https://zerotvm.com",
+        "https://webgpudna.com",
+        "https://neuropulse.live",
+        "https://webgpu-q.vercel.app",
+        "https://markview.ai",
+        "https://safenpm.dev",
+        "https://fused-lora.pages.dev",
+        "https://github.com/abgnydn",
+        "https://www.linkedin.com/in/abgnydn/"
+      ]
+    }
+  ]
+}
+</script>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..700,30..100&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+
+
+<style>
+  :root {
+    --bg: #08060f;
+    --bg-warm: #0d0810;
+    --ink: #f4ecdf;
+    --ink-soft: #cbc1ad;
+    --ink-dim: #8a8170;
+    --ink-faint: #514a3e;
+    --rule: rgba(244, 236, 223, 0.10);
+    --cyan: #5eead4;
+    --cyan-bright: #00e5ff;
+    --violet: #c084fc;
+    --amber: #ff8c42;
+    --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
+    --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+    /* ── canonical cross-site alias layer (see ~/sites-shared/tokens.css) ── */
+    --surface: var(--bg-warm);
+    --border:  var(--rule);
+    --text:    var(--ink);
+    --muted:   var(--ink-dim);
+    --accent:  var(--cyan-bright);
+  }
+
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html {
+    scroll-behavior: smooth;
+    overflow-x: clip;
+    /* bg on <html> so the fixed z-index:-1 page canvas sits above it */
+    background: var(--bg);
+  }
+  body {
+    font-family: var(--sans);
+    background: transparent;
+    color: var(--ink);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.6;
+  }
+  /* Full-page persistent Three.js backdrop (src/canvas.ts).
+     z-index:-1 sits above html bg, below all document content. */
+  #page-canvas {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    pointer-events: none;
+    display: block;
+  }
+  ::selection { background: var(--cyan-bright); color: #02020a; }
+  a { color: inherit; text-decoration: none; }
+
+  /* ─────────────────────────────────────────────────────────
+     HERO — type-only editorial void.
+     We deliberately do NOT show any of the real demo here. The
+     reveal is the surprise behind the CTA.
+     ───────────────────────────────────────────────────────── */
+  .hero {
+    position: relative;
+    height: 100vh;
+    min-height: 700px;
+    width: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg);
+  }
+  /* Slow-drifting ambient gradient — subtle, hints at "something alive" */
+  .hero::before {
+    content: '';
+    position: absolute;
+    inset: -20%;
+    z-index: 0;
+    background:
+      radial-gradient(ellipse 55% 40% at 22% 30%, rgba(94, 234, 212, 0.05), transparent 60%),
+      radial-gradient(ellipse 50% 50% at 78% 70%, rgba(192, 132, 252, 0.04), transparent 60%),
+      radial-gradient(ellipse 40% 30% at 50% 92%, rgba(0, 229, 255, 0.03), transparent 60%);
+    animation: hero-drift 40s ease-in-out infinite alternate;
+  }
+  @keyframes hero-drift {
+    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
+    50%  { transform: translate(2%, -1.5%) rotate(1deg) scale(1.05); }
+    100% { transform: translate(-1.5%, 2%) rotate(-1deg) scale(1.02); }
+  }
+  /* The per-hero canvas is gone — #page-canvas (fixed, z:-1) now handles it
+     across the whole document. The drift gradient on .hero::before stays as
+     a subtle warm tint since the page canvas behind it is transparent. */
+  /* Film grain overlay — editorial cinematic texture */
+  .hero-grain {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    pointer-events: none;
+    opacity: 0.07;
+    mix-blend-mode: overlay;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+  /* Bottom vignette to anchor the type and lead the eye to the scroll cue */
+  .hero-vignette {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    pointer-events: none;
+    background:
+      linear-gradient(180deg, transparent 60%, rgba(8, 6, 15, 0.85) 100%);
+  }
+
+  /* Floating nav over the hero video */
+  .hero-nav {
+    position: relative;
+    z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 28px clamp(24px, 5vw, 64px);
+    animation: heroFadeIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.1s both;
+  }
+  .logo {
+    font-family: var(--serif);
+    font-weight: 400;
+    font-size: 1.35rem;
+    letter-spacing: -0.01em;
+    font-variation-settings: "opsz" 144, "SOFT" 50;
+  }
+  .logo-neuro { color: var(--ink); }
+  .logo-pulse { color: var(--cyan-bright); font-style: italic; }
+  .nav-links {
+    display: flex;
+    gap: 32px;
+    align-items: center;
+    font-family: var(--sans);
+    font-size: 0.82rem;
+    letter-spacing: 0.04em;
+    text-transform: lowercase;
+    color: var(--ink-soft);
+  }
+  .nav-links a { transition: color 0.2s; }
+  .nav-links a:hover { color: var(--cyan-bright); }
+  .nav-star {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border: 1px solid rgba(244, 236, 223, 0.18);
+    border-radius: 999px;
+    background: rgba(8, 6, 15, 0.45);
+    backdrop-filter: blur(6px);
+  }
+  .nav-star svg { vertical-align: -3px; }
+  .star-count {
+    font-family: var(--mono);
+    font-size: 0.75rem;
+    color: var(--ink-soft);
+  }
+  @media (max-width: 720px) {
+    .nav-links { gap: 18px; font-size: 0.74rem; }
+    .nav-links .nav-link-hide { display: none; }
+  }
+
+  /* Hero text stack */
+  .hero-content {
+    position: relative;
+    z-index: 5;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 clamp(24px, 5vw, 64px) clamp(60px, 10vh, 120px);
+    max-width: 1280px;
+    width: 100%;
+    margin: 0 auto;
+  }
+  /* Staggered entrance animations */
+  @keyframes heroFadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    align-self: flex-start;
+    padding: 7px 14px;
+    margin-bottom: 36px;
+    border: 1px solid rgba(94, 234, 212, 0.35);
+    border-radius: 999px;
+    background: rgba(8, 6, 15, 0.55);
+    backdrop-filter: blur(8px);
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.08em;
+    text-transform: lowercase;
+    color: var(--cyan);
+    animation: heroFadeIn 1s cubic-bezier(0.16,1,0.3,1) 0.2s both;
+  }
+  .hero-eyebrow .dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--cyan-bright);
+    box-shadow: 0 0 12px var(--cyan-bright);
+    animation: dot-pulse 2.4s ease-in-out infinite;
+  }
+  @keyframes dot-pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(0.85); }
+  }
+
+  .hero-h1 {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-variation-settings: "opsz" 144, "SOFT" 30;
+    font-size: clamp(2.8rem, 8.5vw, 7rem);
+    line-height: 0.96;
+    letter-spacing: -0.035em;
+    color: var(--ink);
+    max-width: 14ch;
+    margin-bottom: 32px;
+    animation: heroFadeIn 1.2s cubic-bezier(0.16,1,0.3,1) 0.4s both;
+  }
+  .hero-h1 em {
+    font-style: italic;
+    font-weight: 300;
+    color: var(--cyan);
+    font-variation-settings: "opsz" 144, "SOFT" 100;
+    text-shadow: 0 0 40px rgba(0,229,255,0.15);
+  }
+  .hero-h1 .v {
+    color: var(--violet);
+    font-style: italic;
+    font-variation-settings: "opsz" 144, "SOFT" 100;
+  }
+
+  .hero-lede {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
+    line-height: 1.55;
+    color: var(--ink-soft);
+    max-width: 38rem;
+    margin-bottom: 44px;
+    animation: heroFadeIn 1.2s cubic-bezier(0.16,1,0.3,1) 0.65s both;
+  }
+  .hero-lede strong {
+    font-weight: 500;
+    color: var(--ink);
+    font-style: italic;
+  }
+
+  .cta-row {
+    display: flex;
+    gap: 18px;
+    flex-wrap: wrap;
+    align-items: center;
+    animation: heroFadeIn 1.2s cubic-bezier(0.16,1,0.3,1) 0.85s both;
+  }
+
+  /* Hero stats strip — the scale numbers earn the hero, not paragraph 4 */
+  .hero-stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 28px 48px;
+    margin-top: 56px;
+    padding-top: 28px;
+    border-top: 1px solid var(--rule);
+    max-width: 44rem;
+    animation: heroFadeIn 1.2s cubic-bezier(0.16,1,0.3,1) 1.05s both;
+  }
+  .hero-stat { display: flex; flex-direction: column; gap: 8px; }
+  .hero-stat .v {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-variation-settings: "opsz" 144, "SOFT" 60;
+    font-size: 1.85rem;
+    line-height: 1;
+    letter-spacing: -0.025em;
+    color: var(--ink);
+  }
+  .hero-stat .v em {
+    font-style: italic;
+    color: var(--cyan);
+    font-variation-settings: "opsz" 144, "SOFT" 100;
+  }
+  .hero-stat .l {
+    font-family: var(--mono);
+    font-size: 0.68rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--ink-dim);
+  }
+  @media (max-width: 560px) {
+    .hero-stats { gap: 20px 32px; margin-top: 40px; padding-top: 22px; }
+    .hero-stat .v { font-size: 1.55rem; }
+  }
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 26px;
+    font-family: var(--sans);
+    font-size: 0.92rem;
+    font-weight: 500;
+    letter-spacing: 0.005em;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .btn-primary {
+    background: var(--ink);
+    color: #02020a;
+    border-color: var(--ink);
+  }
+  .btn-primary:hover {
+    background: var(--cyan-bright);
+    border-color: var(--cyan-bright);
+    transform: translateY(-1px);
+    box-shadow: 0 12px 32px rgba(0, 229, 255, 0.32);
+  }
+  .btn-ghost {
+    background: transparent;
+    color: var(--ink);
+    border-color: rgba(244, 236, 223, 0.32);
+    backdrop-filter: blur(6px);
+  }
+  .btn-ghost:hover {
+    border-color: var(--ink);
+    background: rgba(244, 236, 223, 0.06);
+  }
+  .btn .arrow {
+    transition: transform 0.25s;
+  }
+  .btn:hover .arrow {
+    transform: translateX(4px);
+  }
+
+  /* Scroll cue at the bottom of the hero */
+  .scroll-cue {
+    position: absolute;
+    z-index: 5;
+    bottom: 32px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    font-family: var(--mono);
+    font-size: 0.65rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--ink-dim);
+  }
+  .scroll-line {
+    width: 1px;
+    height: 36px;
+    background: linear-gradient(180deg, transparent, var(--ink-dim));
+    position: relative;
+    overflow: hidden;
+  }
+  .scroll-line::after {
+    content: '';
+    position: absolute;
+    top: -16px;
+    left: 0;
+    right: 0;
+    height: 16px;
+    background: var(--cyan-bright);
+    animation: scroll-fall 2.4s ease-in-out infinite;
+  }
+  @keyframes scroll-fall {
+    0% { transform: translateY(0); opacity: 0; }
+    30% { opacity: 1; }
+    100% { transform: translateY(52px); opacity: 0; }
+  }
+
+  /* ─────────────────────────────────────────────────────────
+     EDITORIAL — narrow column long-read
+     ───────────────────────────────────────────────────────── */
+  .essay {
+    max-width: 680px;
+    margin: 0 auto;
+    padding: clamp(80px, 14vh, 160px) clamp(24px, 5vw, 32px);
+  }
+  .essay-section {
+    margin-bottom: clamp(80px, 12vh, 140px);
+    opacity: 0; transform: translateY(32px);
+    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
+  }
+  .essay-section.visible { opacity: 1; transform: translateY(0); }
+  .essay-end {
+    opacity: 0; transform: translateY(32px);
+    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
+  }
+  .essay-end.visible { opacity: 1; transform: translateY(0); }
+  .essay-num {
+    font-family: var(--mono);
+    font-size: 0.74rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--cyan);
+    margin-bottom: 28px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+  }
+  .essay-num::before {
+    content: '';
+    width: 28px;
+    height: 1px;
+    background: var(--cyan);
+  }
+  .essay h2 {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-variation-settings: "opsz" 144, "SOFT" 40;
+    font-size: clamp(2rem, 4.4vw, 3.4rem);
+    line-height: 1.04;
+    letter-spacing: -0.025em;
+    color: var(--ink);
+    margin-bottom: 44px;
+    max-width: 18ch;
+  }
+  .essay h2 em {
+    font-style: italic;
+    color: var(--cyan);
+    font-variation-settings: "opsz" 144, "SOFT" 100;
+  }
+  .essay p {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-variation-settings: "opsz" 14, "SOFT" 40;
+    font-size: 1.18rem;
+    line-height: 1.72;
+    color: var(--ink-soft);
+    margin-bottom: 1.4em;
+    max-width: 38rem;
+  }
+  .essay p strong {
+    font-weight: 500;
+    color: var(--ink);
+  }
+  .essay p em {
+    font-style: italic;
+    color: var(--ink);
+  }
+  .essay p code, .essay p .mono {
+    font-family: var(--mono);
+    font-size: 0.92em;
+    color: var(--cyan);
+    background: rgba(94, 234, 212, 0.08);
+    padding: 1px 6px;
+    border-radius: 3px;
+  }
+
+  /* Drop cap on the first paragraph of section 01 */
+  .essay-section.lead p:first-of-type::first-letter {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-variation-settings: "opsz" 144, "SOFT" 100;
+    font-size: 5.2em;
+    float: left;
+    line-height: 0.82;
+    margin: 0.08em 0.12em -0.05em 0;
+    color: var(--cyan);
+    font-style: italic;
+  }
+
+  /* Pull quote */
+  .pull {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-variation-settings: "opsz" 144, "SOFT" 60;
+    font-style: italic;
+    font-size: clamp(1.4rem, 2.6vw, 2rem);
+    line-height: 1.32;
+    color: var(--ink);
+    border-left: 2px solid var(--cyan);
+    padding: 8px 0 8px 28px;
+    margin: 48px 0;
+    max-width: 36rem;
+  }
+
+  /* Horizontal rule between essay sections */
+  .essay-rule {
+    border: none;
+    height: 1px;
+    background: var(--rule);
+    max-width: 4rem;
+    margin: 0 0 clamp(80px, 12vh, 140px);
+  }
+
+  /* Promise — three small evidence cards inline in the essay column */
+  .evidence {
+    display: grid;
+    gap: 1px;
+    background: var(--rule);
+    border: 1px solid var(--rule);
+    margin: 48px 0 8px;
+  }
+  .evidence-row {
+    display: grid;
+    grid-template-columns: 90px 1fr;
+    background: var(--bg);
+    padding: 24px 4px 24px 0;
+    align-items: start;
+  }
+  .evidence-key {
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--cyan);
+    padding-top: 4px;
+  }
+  .evidence-val {
+    font-family: var(--sans);
+    font-size: 0.98rem;
+    line-height: 1.55;
+    color: var(--ink);
+  }
+  .evidence-val span {
+    display: block;
+    color: var(--ink-dim);
+    font-size: 0.86rem;
+    margin-top: 4px;
+  }
+
+  /* Anatomy diagram inline */
+  .anatomy-figure {
+    margin: 48px 0;
+    text-align: center;
+  }
+  .anatomy-figure svg {
+    width: 100%;
+    max-width: 520px;
+    height: auto;
+  }
+  .anatomy-figure figcaption {
+    font-family: var(--mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.08em;
+    color: var(--ink-dim);
+    margin-top: 16px;
+  }
+
+  /* Anatomy parts list */
+  .parts-list {
+    list-style: none;
+    margin: 40px 0;
+    border-top: 1px solid var(--rule);
+  }
+  .parts-list li {
+    padding: 22px 0;
+    border-bottom: 1px solid var(--rule);
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+  .parts-list strong {
+    font-family: var(--sans);
+    font-weight: 500;
+    font-size: 0.98rem;
+    color: var(--ink);
+    letter-spacing: -0.005em;
+  }
+  .parts-list span {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-size: 1.04rem;
+    line-height: 1.6;
+    color: var(--ink-soft);
+  }
+
+  /* Validation report block */
+  .proof {
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    line-height: 1.85;
+    background: #050309;
+    border: 1px solid var(--rule);
+    border-radius: 4px;
+    padding: 28px 32px;
+    margin: 40px 0;
+    color: var(--ink-soft);
+    overflow-x: auto;
+  }
+  .proof .head {
+    color: var(--cyan-bright);
+    margin-bottom: 12px;
+    font-weight: 500;
+  }
+  .proof .ok { color: #6ee7b7; }
+  .proof .label { color: var(--ink-dim); }
+  .proof .k { color: var(--violet); }
+
+  /* Stack list */
+  .stack-list {
+    list-style: none;
+    counter-reset: stack;
+    margin: 40px 0;
+  }
+  .stack-list li {
+    counter-increment: stack;
+    padding: 28px 0;
+    border-top: 1px solid var(--rule);
+    display: grid;
+    grid-template-columns: 56px 1fr;
+    gap: 16px;
+    align-items: start;
+  }
+  .stack-list li:last-child { border-bottom: 1px solid var(--rule); }
+  .stack-list li::before {
+    content: counter(stack, decimal-leading-zero);
+    font-family: var(--mono);
+    font-size: 0.78rem;
+    color: var(--cyan);
+    letter-spacing: 0.06em;
+    padding-top: 5px;
+  }
+  .stack-list strong {
+    display: block;
+    font-family: var(--sans);
+    font-weight: 500;
+    font-size: 1.02rem;
+    color: var(--ink);
+    margin-bottom: 6px;
+  }
+  .stack-list span {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-size: 1.02rem;
+    line-height: 1.6;
+    color: var(--ink-soft);
+  }
+  .stack-list code {
+    font-family: var(--mono);
+    font-size: 0.86em;
+    color: var(--cyan);
+    background: rgba(94, 234, 212, 0.08);
+    padding: 1px 6px;
+    border-radius: 3px;
+  }
+
+  /* ─────────────────────────────────────────────────────────
+     "In real numbers" — full-bleed scale payoff between 04 and the CTA.
+     Breaks out of the 680px essay column because these numbers want room.
+     ───────────────────────────────────────────────────────── */
+  .numbers {
+    position: relative;
+    left: 50%;
+    right: 50%;
+    width: 100vw;
+    max-width: 100vw;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    margin-bottom: clamp(80px, 12vh, 140px);
+    padding: clamp(56px, 9vh, 100px) clamp(24px, 5vw, 64px);
+    background:
+      radial-gradient(ellipse 80% 40% at 50% 0%, rgba(94, 234, 212, 0.04), transparent 60%),
+      radial-gradient(ellipse 80% 40% at 50% 100%, rgba(192, 132, 252, 0.03), transparent 60%);
+    border-top: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
+    opacity: 0; transform: translateY(32px);
+    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
+  }
+  .numbers.visible { opacity: 1; transform: translateY(0); }
+  .numbers-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }
+  /* Per-section numbers canvas is gone — #page-canvas's prog uniform
+     ramps up horizontal flow automatically in this region. */
+  .numbers h2 {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-variation-settings: "opsz" 144, "SOFT" 40;
+    font-size: clamp(2rem, 4.4vw, 3.4rem);
+    line-height: 1.04;
+    letter-spacing: -0.025em;
+    color: var(--ink);
+    margin: 24px 0 60px;
+    max-width: 22ch;
+  }
+  .numbers h2 em {
+    font-style: italic;
+    color: var(--cyan);
+    font-variation-settings: "opsz" 144, "SOFT" 100;
+  }
+  .numbers-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1px;
+    background: var(--rule);
+    border: 1px solid var(--rule);
+  }
+  .numbers-cell {
+    padding: clamp(32px, 5vh, 56px) clamp(24px, 3vw, 40px);
+    background: var(--bg);
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    transition: background 0.35s;
+  }
+  .numbers-cell:hover { background: var(--bg-warm); }
+  .numbers-num {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-variation-settings: "opsz" 144, "SOFT" 80;
+    font-size: clamp(3rem, 6.4vw, 5.2rem);
+    line-height: 0.95;
+    letter-spacing: -0.03em;
+    color: var(--ink);
+  }
+  .numbers-num em {
+    font-style: italic;
+    color: var(--cyan);
+    font-variation-settings: "opsz" 144, "SOFT" 100;
+  }
+  .numbers-label {
+    font-family: var(--mono);
+    font-size: 0.7rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--cyan);
+  }
+  .numbers-sub {
+    font-family: var(--serif);
+    font-weight: 300;
+    font-size: 1rem;
+    line-height: 1.55;
+    color: var(--ink-soft);
+    max-width: 32ch;
+  }
+
+  /* End-of-essay closing CTA */
+  .essay-end {
+    text-align: left;
+    padding-top: 40px;
+  }
+  .essay-end h2 {
+    margin-bottom: 24px;
+  }
+  .essay-end p {
+    margin-bottom: 36px;
+  }
+
+  /* ─────────────────────────────────────────────────────────
+     FOOTER — minimal, full width
+     ───────────────────────────────────────────────────────── */
+  footer {
+    border-top: 1px solid var(--rule);
+    padding: 48px clamp(24px, 5vw, 64px);
+    margin-top: 80px;
+  }
+  .footer-inner {
+    max-width: 1280px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+  .footer-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  .footer-credit {
+    font-family: var(--sans);
+    font-size: 0.85rem;
+    color: var(--ink-dim);
+  }
+  .footer-credit a {
+    color: var(--ink-soft);
+    transition: color 0.2s;
+  }
+  .footer-credit a:hover { color: var(--cyan-bright); }
+  .footer-links {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+    font-family: var(--sans);
+    font-size: 0.82rem;
+    letter-spacing: 0.02em;
+    text-transform: lowercase;
+    color: var(--ink-soft);
+  }
+  .footer-links a { transition: color 0.2s; }
+  .footer-links a:hover { color: var(--cyan-bright); }
+  .footer-related {
+    display: flex;
+    gap: 18px;
+    align-items: center;
+    flex-wrap: wrap;
+    font-family: var(--mono);
+    font-size: 0.74rem;
+    color: var(--ink-dim);
+  }
+  .footer-related .label {
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--ink-faint);
+  }
+  .footer-related a {
+    color: var(--ink-soft);
+    transition: color 0.2s;
+  }
+  .footer-related a:hover { color: var(--cyan-bright); }
+  .footer-bottom {
+    font-family: var(--mono);
+    font-size: 0.7rem;
+    color: var(--ink-faint);
+    letter-spacing: 0.06em;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding-top: 20px;
+    border-top: 1px solid var(--rule);
+  }
+
+  /* Responsive */
+  @media (max-width: 720px) {
+    .hero { min-height: 600px; }
+    .hero-h1 { font-size: clamp(2.4rem, 11vw, 4rem); }
+    .hero-lede { font-size: 1rem; }
+    .essay { padding: 80px 24px; }
+    .essay h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
+    .essay p { font-size: 1.08rem; }
+    .evidence-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
+    .evidence-key { padding-top: 0; }
+    .stack-list li { grid-template-columns: 40px 1fr; }
+    .scroll-cue { display: none; }
+  }
+</style>
+  <script type="module" crossorigin src="./assets/main-D1-Ogq2V.js"></script>
+  <link rel="modulepreload" crossorigin href="./assets/three.module-Bwi0mW4U.js">
+</head>
+<body>
+
+  <!-- Persistent page-wide Three.js backdrop. One canvas, scroll-driven. -->
+  <canvas id="page-canvas" aria-hidden="true"></canvas>
+
+  <!-- ───────────────────────────────────────────────
+       HERO — type-only editorial void.
+       Deliberately no preview of the demo: the reveal
+       is the surprise behind the CTA. Page canvas sits
+       behind this entire section at z:-1.
+       ─────────────────────────────────────────────── -->
+  <section class="hero">
+    <div class="hero-grain"></div>
+    <div class="hero-vignette"></div>
+
+    <nav class="hero-nav">
+      <a href="/" class="logo">
+        <span class="logo-neuro">neuro</span><span class="logo-pulse">pulse</span>
+      </a>
+      <div class="nav-links">
+        <a href="#essay" class="nav-link-hide">essay</a>
+        <a href="#stack" class="nav-link-hide">stack</a>
+        <a href="/app/">demo</a>
+        <a href="https://github.com/abgnydn/neuropulse" target="_blank" rel="noopener" class="nav-star">
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+          <span class="star-count" id="navStarCount">·</span>
+        </a>
+      </div>
+    </nav>
+
+    <div class="hero-content">
+      <div class="hero-eyebrow">
+        <span class="dot"></span>
+        live · phi-3-mini · webgpu
+      </div>
+      <h1 class="hero-h1">
+        A real transformer, <em>laid&nbsp;bare.</em>
+      </h1>
+      <p class="hero-lede">
+        3.8 billion parameters. On your GPU, in your browser. Every point, every line, every pulse — a real tensor, read one-to-one. <strong>The model itself, drawn from the inside.</strong> <em>Shift-click any of the 1,024 attention heads to turn it off and watch what breaks.</em>
+      </p>
+      <div class="cta-row">
+        <a href="/app/" class="btn btn-primary">
+          Launch the demo
+          <span class="arrow">→</span>
+        </a>
+        <a href="#essay" class="btn btn-ghost">Read the essay</a>
+      </div>
+
+      <div class="hero-stats">
+        <div class="hero-stat">
+          <div class="v"><em>3.8</em>B</div>
+          <div class="l">parameters</div>
+        </div>
+        <div class="hero-stat">
+          <div class="v">292</div>
+          <div class="l">dispatches / token</div>
+        </div>
+        <div class="hero-stat">
+          <div class="v">22</div>
+          <div class="l">GPU buffers</div>
+        </div>
+        <div class="hero-stat">
+          <div class="v"><em>0</em></div>
+          <div class="l">servers</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="scroll-cue">
+      <span>scroll</span>
+      <div class="scroll-line"></div>
+    </div>
+  </section>
+
+  <!-- ───────────────────────────────────────────────
+       EDITORIAL LONG-READ
+       ─────────────────────────────────────────────── -->
+  <article class="essay" id="essay">
+
+    <section class="essay-section lead">
+      <div class="essay-num">01 · The Promise</div>
+      <h2>The model, <em>drawn from inside.</em></h2>
+      <p>Most "AI visualizations" online are decoration — dots pulsing to a chosen rhythm, animated metaphors built on top of static images. The model itself sits somewhere else entirely.</p>
+      <p>Neuropulse takes the opposite path. Every brightness, every line, every motion is a direct readout of a real <span class="mono">WebGPU</span> buffer mid-forward-pass. When the model thinks, you watch <em>it</em> think — the thing itself, not a representation of it.</p>
+      <p class="pull">Strict 1:1. Every pixel a function of a real tensor.</p>
+      <p>3.8B weights in your GPU. Attention in <span class="mono">WGSL</span>. Next-token sampled in your tab. The whole pipeline lives inside this page — close it and the inference stops with it.</p>
+
+      <div class="evidence">
+        <div class="evidence-row">
+          <div class="evidence-key">model</div>
+          <div class="evidence-val">Phi-3-mini, q4f16_1<span>3.8B parameters · same weights Microsoft ships</span></div>
+        </div>
+        <div class="evidence-row">
+          <div class="evidence-key">runtime</div>
+          <div class="evidence-val">WebGPU compute shaders<span>13 pipelines · 22 buffers · 292 dispatches per token</span></div>
+        </div>
+        <div class="evidence-row">
+          <div class="evidence-key">privacy</div>
+          <div class="evidence-val">Your GPU only<span>zero server calls · nothing leaves your machine</span></div>
+        </div>
+      </div>
+    </section>
+
+    <hr class="essay-rule"/>
+
+    <section class="essay-section">
+      <div class="essay-num">02 · What you're watching</div>
+      <h2>Every part of the model, <em>labeled.</em></h2>
+      <p>The 3D scene is not a metaphor. Every glowing element maps to a specific tensor in Phi-3-mini's compute graph.</p>
+      <p>The 3,072 points of the residual stream are laid out by PCA of the model's layer-0 <code>qkv_proj</code> weights — so dims read into attention together sit near each other. Each point's brightness is the <em>live</em> value of that residual dim on every step.</p>
+      <p>Hover an attention head — the brightness you see <em>is</em> that head's output magnitude.</p>
+
+      <figure class="anatomy-figure">
+        <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <radialGradient id="anaCyan" cx="50%" cy="50%"><stop offset="0%" stop-color="#5eead4" stop-opacity="0.9"/><stop offset="100%" stop-color="#5eead4" stop-opacity="0"/></radialGradient>
+            <radialGradient id="anaViolet" cx="50%" cy="50%"><stop offset="0%" stop-color="#c084fc" stop-opacity="0.85"/><stop offset="100%" stop-color="#c084fc" stop-opacity="0"/></radialGradient>
+          </defs>
+          <g stroke="rgba(94,234,212,0.18)" stroke-width="0.5">
+            <line x1="50" y1="60"  x2="350" y2="60"/>
+            <line x1="50" y1="100" x2="350" y2="100"/>
+            <line x1="50" y1="140" x2="350" y2="140"/>
+            <line x1="50" y1="180" x2="350" y2="180"/>
+            <line x1="50" y1="220" x2="350" y2="220"/>
+            <line x1="50" y1="260" x2="350" y2="260"/>
+            <line x1="50" y1="300" x2="350" y2="300"/>
+            <line x1="50" y1="340" x2="350" y2="340"/>
+          </g>
+          <circle cx="140" cy="90" r="32" fill="url(#anaCyan)"/>
+          <text x="68" y="55" font-family="JetBrains Mono, monospace" font-size="9" fill="#5eead4">attention heads</text>
+          <line x1="140" y1="90" x2="92" y2="58" stroke="#5eead4" stroke-width="0.5"/>
+
+          <rect x="165" y="160" width="70" height="70" fill="url(#anaViolet)" rx="6"/>
+          <text x="245" y="200" font-family="JetBrains Mono, monospace" font-size="9" fill="#c084fc">FFN slab</text>
+          <line x1="235" y1="195" x2="245" y2="197" stroke="#c084fc" stroke-width="0.5"/>
+
+          <line x1="200" y1="30" x2="200" y2="370" stroke="#5eead4" stroke-opacity="0.4" stroke-width="2"/>
+          <text x="205" y="22" font-family="JetBrains Mono, monospace" font-size="9" fill="#5eead4">residual stream</text>
+
+          <g>
+            <rect x="290" y="260" width="8" height="60" fill="#5eead4" opacity="0.4"/>
+            <rect x="302" y="260" width="8" height="60" fill="#5eead4" opacity="0.5"/>
+            <rect x="314" y="260" width="8" height="60" fill="#5eead4" opacity="0.6"/>
+            <rect x="326" y="260" width="8" height="60" fill="#5eead4" opacity="0.4"/>
+          </g>
+          <text x="278" y="340" font-family="JetBrains Mono, monospace" font-size="9" fill="#5eead4">KV cache</text>
+
+          <circle cx="200" cy="370" r="14" fill="#ff8c42" opacity="0.5"/>
+          <text x="135" y="395" font-family="JetBrains Mono, monospace" font-size="9" fill="#ff8c42">LM head → next token</text>
+
+          <circle cx="200" cy="30" r="10" fill="#c084fc" opacity="0.7"/>
+        </svg>
+        <figcaption>fig. 1 — the anatomy of a single forward pass</figcaption>
+      </figure>
+
+      <ul class="parts-list">
+        <li>
+          <strong>32 layer rings</strong>
+          <span>Each ring is one transformer block. Brightness tracks the post-attention plus post-FFN residual norm for that layer — watch the signal build as the prompt flows upward.</span>
+        </li>
+        <li>
+          <strong>32 attention heads per layer</strong>
+          <span>Cyan heads on the outer ring. Each lights up proportional to its output magnitude. 1,024 heads in total (32 layers × 32 heads), all live.</span>
+        </li>
+        <li>
+          <strong>FFN slab</strong>
+          <span>The violet 8,192-neuron expansion. By far the largest compute budget in the model. You can see it pulse as the MLP activates.</span>
+        </li>
+        <li>
+          <strong>Residual stream (3,072 dims)</strong>
+          <span>The highway through the network. 3,072 points, one per dim, placed by PCA of the layer-0 <code>qkv_proj</code> weights so functionally related dims sit near each other. Brightness on each point is the live residual value at that dim.</span>
+        </li>
+        <li>
+          <strong>KV cache strips</strong>
+          <span>The growing memory of past tokens. Each strip is one position; height equals cache fill for that layer.</span>
+        </li>
+        <li>
+          <strong>LM head</strong>
+          <span>Final projection to 32,064 vocab logits. Softmax → next token. The live top-k distribution prints to the side panel as the model decodes.</span>
+        </li>
+      </ul>
+    </section>
+
+    <hr class="essay-rule"/>
+
+    <section class="essay-section">
+      <div class="essay-num">03 · Validation</div>
+      <h2>Cross-checked against <em>reference Phi-3.</em></h2>
+      <p>"Strict 1:1" is a strong claim, so it has to be falsifiable. Neuropulse ships with a built-in test suite that diffs the WebGPU implementation against a reference HuggingFace fp16 Phi-3-mini on a fixed set of prompts cached as <code>reference.json</code>. Click the <strong>wrench</strong> icon inside the demo to run it — the actual numbers from <em>your</em> GPU print to your browser console.</p>
+
+      <div class="proof">
+        <div class="head">═══ What the suite checks ═══</div>
+        <div>GPU: <span class="k">q4f16_1 Phi-3-mini</span> &nbsp; Reference: <span class="k">HF fp16 Phi-3-mini</span></div>
+        <div>&nbsp;</div>
+        <div><span class="label">[1]</span> <span class="ok">Tokenizer</span> — GPU input ids match HF byte-for-byte on every prompt</div>
+        <div><span class="label">[2]</span> <span class="ok">Hidden states</span> — full 3,072-dim residual diffed at layers 0, 4, 8, 12, 16, 20, 24, 28, 31</div>
+        <div><span class="label">[3]</span> <span class="ok">Attention (layer 31)</span> — online softmax cross-checked against an explicit-softmax reference path</div>
+        <div><span class="label">[4]</span> <span class="ok">Logits</span> — top-k probabilities + Jensen–Shannon divergence vs HF on a 15-prompt sweep, teacher-forced for 5 steps each</div>
+        <div><span class="label">[5]</span> <span class="ok">Long context</span> — 290-token prompt, 10 decode steps, top-1 matched against HF</div>
+        <div><span class="label">[6]</span> <span class="ok">Sampler</span> — 5,000-sample empirical distribution vs softmax, JSD &lt; 1e-2</div>
+      </div>
+
+      <p>Expect tiny deltas at the hidden-state level — that's the cost of int4, not drift. What matters is the last line: <strong>identical top-1 tokens vs fp16 Phi-3</strong> on the test set. Re-run it on your own machine in under a minute.</p>
+    </section>
+
+    <hr class="essay-rule"/>
+
+    <section class="essay-section">
+      <div class="essay-num">04 · Causal Scrubbing</div>
+      <h2>And you can <em>reach in.</em></h2>
+      <p>Watching is the easy half. The harder, more interesting half: <strong>shift-click any of the 1,024 attention-head spheres</strong> and that head's contribution to the residual stream is zeroed before O-projection — the canonical single-head ablation from the mech-interp literature, running live on the same WebGPU context that just rendered the frame. Press <strong>Run&nbsp;ablated</strong> and the same prompt generates twice, side by side: once whole, once missing that one head.</p>
+
+      <p>Or pick a layer, run a sweep, and let it ablate every head in turn. The panel paints a strip the model itself authored — each cell colored by how much the answer moved when that head went silent. <strong>Cool tones for the heads the prompt didn't need; warm ones for the heads it leaned on.</strong> About sixty seconds buys you a layer's importance map.</p>
+
+      <div class="proof">
+        <div class="head">═══ Verified ablation gradient · prompt: "Paris is the capital of" ═══</div>
+        <div>&nbsp;</div>
+        <div><span class="label">{L0}</span> <span class="ok">all heads off</span> — output barely shifts. Layer-0 attention near the embeddings is heavily redundant.</div>
+        <div><span class="label">{L31}</span> <span class="ok">all heads off</span> — diverges at the low-certainty positions. The final layer's FFN and residual still carry the decision.</div>
+        <div><span class="label">{L28..L31}</span> <span class="ok">stacked</span> — generation hits the stop token early. Compounded ablation bites.</div>
+        <div><span class="label">every layer off</span> — pure FFN + residual, no token-to-token information flow. <span class="k">"-,unlintzegesenma\\. #quierudo\\i'mʔholmo&lt;0x95&gt;-"</span></div>
+      </div>
+
+      <p>This is the same primitive that found "induction heads" and traced the circuits behind in-context learning — work that, until now, lived in Python notebooks tethered to CPUs and A100s. <strong>Here it runs in a browser tab, on your laptop, in real time, on a 3.8B-parameter model.</strong> The next thirty seconds of your life can look exactly like a mech-interp paper figure.</p>
+    </section>
+
+    <hr class="essay-rule"/>
+
+    <section class="essay-section" id="stack">
+      <div class="essay-num">05 · The Stack</div>
+      <h2>How it's <em>built.</em></h2>
+      <p>Four pieces. No frameworks for the inference path, no dependency soup, no clever tricks hiding the model from you.</p>
+
+      <ol class="stack-list">
+        <li>
+          <div>
+            <strong>WebGPU compute &amp; WGSL</strong>
+            <span>13 pipelines, 22 buffers, 292 dispatches per token. Quantization: <code>q4f16_1</code>. Hand-written attention and FFN kernels.</span>
+          </div>
+        </li>
+        <li>
+          <div>
+            <strong>MLC Phi-3-mini weights</strong>
+            <span>The same weights as <code>mlc-ai/Phi-3-mini-4k-instruct-q4f16_1-MLC</code>, fetched directly from HuggingFace and cached in the browser's Cache API.</span>
+          </div>
+        </li>
+        <li>
+          <div>
+            <strong>Three.js scene</strong>
+            <span>Plain <code>WebGLRenderer</code>. No bloom, no particles, no decorative shaders. Every pixel pulls from a real tensor on every frame.</span>
+          </div>
+        </li>
+        <li>
+          <div>
+            <strong>PCA layout from the model's own weights</strong>
+            <span>Residual points are placed by PCA of layer 0's <code>qkv_proj.weight</code> columns; FFN points by PCA of <code>down_proj.weight</code>. Dims that get read or written together end up near each other, so the geometry is shaped by the model itself, not by hand.</span>
+          </div>
+        </li>
+      </ol>
+    </section>
+
+    <hr class="essay-rule"/>
+
+    <section class="numbers" id="numbers">
+      <div class="numbers-inner">
+        <div class="essay-num">06 · In real numbers</div>
+        <h2>What it <em>actually</em> is.</h2>
+        <div class="numbers-grid">
+          <div class="numbers-cell">
+            <div class="numbers-num"><em>3.8</em>B</div>
+            <div class="numbers-label">parameters</div>
+            <div class="numbers-sub">Phi-3-mini, q4f16_1. The same weights Microsoft ships — loaded into your GPU, not emulated.</div>
+          </div>
+          <div class="numbers-cell">
+            <div class="numbers-num">1,024</div>
+            <div class="numbers-label">attention heads, live</div>
+            <div class="numbers-sub">32 layers × 32 heads. Every one of them drawn from its real output magnitude on every token.</div>
+          </div>
+          <div class="numbers-cell">
+            <div class="numbers-num">292</div>
+            <div class="numbers-label">dispatches / token</div>
+            <div class="numbers-sub">13 WGSL pipelines, 22 GPU buffers. One full forward pass, in your browser tab.</div>
+          </div>
+          <div class="numbers-cell">
+            <div class="numbers-num"><em>0</em></div>
+            <div class="numbers-label">servers</div>
+            <div class="numbers-sub">Inference begins and ends inside this tab — every weight, every kernel, every readback. Close the tab; it's gone with you.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="essay-end">
+      <div class="essay-num">Now you</div>
+      <h2>See it for <em>yourself.</em></h2>
+      <p>Open Neuropulse. Feed it a prompt. Watch the model think. First load streams ~2&nbsp;GB into your GPU; next visit is instant (OPFS-cached to disk).</p>
+      <a href="/app/" class="btn btn-primary">
+        Launch Neuropulse
+        <span class="arrow">→</span>
+      </a>
+    </section>
+
+  </article>
+
+  <!-- ───────────────────────────────────────────────
+       FOOTER
+       ─────────────────────────────────────────────── -->
+  <footer>
+    <div class="footer-inner">
+      <div class="footer-row">
+        <div class="footer-credit">
+          <span class="logo" style="font-size:1rem"><span class="logo-neuro">neuro</span><span class="logo-pulse">pulse</span></span>
+          &nbsp;by&nbsp;<a href="https://github.com/abgnydn" target="_blank" rel="noopener">Ahmet Barış Günaydın</a>
+        </div>
+        <div class="footer-links">
+          <a href="/app/">demo</a>
+          <a href="#essay">essay</a>
+          <a href="https://github.com/abgnydn/neuropulse" target="_blank" rel="noopener" style="color:var(--cyan-bright)">★ star on github</a>
+          <a href="https://www.linkedin.com/in/abgnydn/" target="_blank" rel="noopener">linkedin</a>
+          <a href="https://barisgunaydin.com" target="_blank" rel="noopener">site</a>
+        </div>
+      </div>
+      <div class="footer-related">
+        <span class="label">More by Ahmet</span>
+        <a href="https://kernelfusion.dev" target="_blank" rel="noopener">kernelfusion.dev</a>
+        <a href="https://gpubench.dev" target="_blank" rel="noopener">gpubench.dev</a>
+        <a href="https://zerotvm.com" target="_blank" rel="noopener">zerotvm.com</a>
+        <a href="https://webgpudna.com" target="_blank" rel="noopener">webgpudna.com</a>
+        <a href="https://webgpu-q.vercel.app" target="_blank" rel="noopener">webgpu-q.vercel.app</a>
+      </div>
+      <div class="footer-bottom">
+        <div>real forward pass · built with WebGPU + Three.js · MIT licensed</div>
+        <div>© 2026</div>
+      </div>
+    </div>
+  </footer>
+
+<script>
+  // Live GitHub star count for the nav button. Cached in sessionStorage so
+  // we don't hammer the unauthenticated GitHub API (60 req/hr limit).
+  (function () {
+    const el = document.getElementById('navStarCount')
+    if (!el) return
+    const CACHE_KEY = 'np:stars'
+    const CACHE_TTL = 10 * 60 * 1000 // 10 minutes
+    try {
+      const cached = sessionStorage.getItem(CACHE_KEY)
+      if (cached) {
+        const { count, ts } = JSON.parse(cached)
+        if (Date.now() - ts < CACHE_TTL && typeof count === 'number') {
+          el.textContent = count
+          return
+        }
+      }
+    } catch {}
+    fetch('https://api.github.com/repos/abgnydn/neuropulse')
+      .then(r => r.ok ? r.json() : null)
+      .then(d => {
+        if (!d || typeof d.stargazers_count !== 'number') {
+          // Repo is private or API failed — hide the count chip so we
+          // don't ship a dead "·" placeholder.
+          el.style.display = 'none'
+          return
+        }
+        el.textContent = d.stargazers_count
+        try { sessionStorage.setItem(CACHE_KEY, JSON.stringify({ count: d.stargazers_count, ts: Date.now() })) } catch {}
+      })
+      .catch(() => { el.style.display = 'none' })
+  })()
+</script>
+
+<script>
+  // Scroll-reveal for essay sections
+  const revealObs = new IntersectionObserver((entries) => {
+    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); revealObs.unobserve(e.target); } });
+  }, { threshold: 0.15 });
+  document.querySelectorAll('.essay-section, .essay-end, .numbers').forEach(el => revealObs.observe(el));
+
+  // Mobile guard — the demo needs ~2 GB of GPU memory and WebGPU, neither
+  // of which work on phones. Intercept /app/ links on narrow screens and
+  // show a friendly "desktop only" modal instead of crashing the browser.
+  (function () {
+    const IS_MOBILE = window.matchMedia('(max-width: 820px)').matches || /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
+    if (!IS_MOBILE) return;
+
+    const modal = document.createElement('div');
+    modal.id = 'mobileGate';
+    modal.innerHTML = `
+      <div class="mg-backdrop"></div>
+      <div class="mg-card">
+        <div class="mg-eyebrow">Desktop only</div>
+        <h3>Neuropulse runs a real 2 GB model on your GPU.</h3>
+        <p>Your phone browser doesn't have enough GPU memory — it will crash mid-download. Open <strong>neuropulse.live</strong> on a desktop Chrome, Edge, or Safari TP to try it.</p>
+        <div class="mg-actions">
+          <button class="mg-btn mg-copy" type="button">Copy link</button>
+          <button class="mg-btn mg-dismiss" type="button">Got it</button>
+        </div>
+      </div>
+    `;
+    const css = document.createElement('style');
+    css.textContent = `
+      #mobileGate { position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:24px; }
+      #mobileGate.open { display:flex; }
+      #mobileGate .mg-backdrop { position:absolute; inset:0; background:rgba(2,2,16,0.85); backdrop-filter: blur(12px); }
+      #mobileGate .mg-card { position:relative; max-width:420px; background:#0d0d1f; border:1px solid rgba(94,234,212,0.25); border-radius:16px; padding:28px 24px; color:#f4ecdf; box-shadow:0 20px 60px rgba(0,0,0,0.6); }
+      #mobileGate .mg-eyebrow { font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:#5eead4; margin-bottom:12px; }
+      #mobileGate h3 { font-size:1.15rem; line-height:1.35; margin:0 0 12px; font-weight:600; }
+      #mobileGate p { font-size:0.9rem; line-height:1.55; color:#b8b4a8; margin:0 0 20px; }
+      #mobileGate strong { color:#00e5ff; font-weight:500; }
+      #mobileGate .mg-actions { display:flex; gap:10px; }
+      #mobileGate .mg-btn { flex:1; padding:12px 16px; border-radius:10px; border:1px solid rgba(94,234,212,0.3); background:transparent; color:#f4ecdf; font-size:0.85rem; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
+      #mobileGate .mg-copy { background:#5eead4; color:#0d0d1f; border-color:#5eead4; font-weight:600; }
+      #mobileGate .mg-copy.copied { background:#00e5ff; }
+    `;
+    document.head.appendChild(css);
+    document.body.appendChild(modal);
+
+    function openGate(e) {
+      if (e) e.preventDefault();
+      modal.classList.add('open');
+    }
+    function closeGate() { modal.classList.remove('open'); }
+
+    document.querySelectorAll('a[href="/app/"], a[href^="/app"]').forEach(a => {
+      a.addEventListener('click', openGate);
+    });
+
+    modal.querySelector('.mg-dismiss').addEventListener('click', closeGate);
+    modal.querySelector('.mg-backdrop').addEventListener('click', closeGate);
+    const copyBtn = modal.querySelector('.mg-copy');
+    copyBtn.addEventListener('click', () => {
+      const url = 'https://neuropulse.live';
+      navigator.clipboard?.writeText(url).then(() => {
+        copyBtn.textContent = 'Copied ✓';
+        copyBtn.classList.add('copied');
+        setTimeout(closeGate, 900);
+      }).catch(() => { copyBtn.textContent = url; });
+    });
+  })();
+</script>
+
+<!-- Persistent page-wide Three.js backdrop — scroll drives particle morph,
+     readability-fade dims during essay body, brightens at hero/numbers/CTA. -->
+
+</body>
 </html>

robots.txt

@@ -0,0 +1,25 @@
+# https://neuropulse.live
+User-agent: *
+Allow: /
+
+# Disallow scraping by AI training crawlers (this is a creative work)
+User-agent: GPTBot
+Disallow: /
+
+User-agent: Google-Extended
+Disallow: /
+
+User-agent: ClaudeBot
+Disallow: /
+
+User-agent: CCBot
+Disallow: /
+
+User-agent: Bytespider
+Disallow: /
+
+User-agent: anthropic-ai
+Disallow: /
+
+Sitemap: https://neuropulse.live/sitemap.xml
+Host: https://neuropulse.live

sitemap.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://neuropulse.live/</loc>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://neuropulse.live/app/</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+</urlset>