CLS session windows — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Two ways to count the same layout shifts</h1>
    <p class="pg-sub">
      Trigger some layout shifts on a simulated clock. Watch a naive lifetime
      total and the real <code>CLS</code> algorithm — the largest 1s-gap,
      5s-cap <strong>session window</strong> — report completely different
      numbers for the exact same events.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Trigger shifts</div>
      <p class="hint">Clock: <span class="clock" id="clock">0.0s</span> — each button fires a shift right now and nudges the clock forward a little.</p>
      <div class="btn-row">
        <button class="btn" id="small">+ small shift (0.01)</button>
        <button class="btn" id="medium">+ medium shift (0.05)</button>
        <button class="btn primary" id="large">+ big shift (0.15)</button>
      </div>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn ghost" id="wait">⏱️ let 2s pass (no shift)</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="burst">Preset: ad-reflow burst (5 shifts, <1s apart)</button>
        <button class="btn sm" data-preset="scattered">Preset: scattered over the afternoon (5 shifts, >1s apart)</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="scoreboard">
        <div class="score-card naive">
          <div class="label">Naive lifetime sum</div>
          <div class="value" id="naiveScore">0.000</div>
        </div>
        <div class="score-card real">
          <div class="label">Real CLS (session-windowed)</div>
          <div class="value" id="realScore">0.000</div>
        </div>
      </div>
      <p class="hint" id="caption">Fire a few shifts to see the two numbers start to disagree.</p>
      <div class="timeline" id="timeline" aria-label="Shifts over time, grouped into session windows"></div>
      <div class="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready.</span>
      </div>
      <div class="log" id="log" style="margin-top:8px; max-height:120px; overflow-y:auto;"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.