Long Animation Frames — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 What's actually inside your slow click handler?</h1>
    <p class="pg-sub">
      This button updates a real, hidden grid of rows in your own browser — no simulation.
      Pick how it writes to the DOM, then click it and watch a live <code>PerformanceObserver</code>
      name exactly which part of the frame was JavaScript and which part was the browser
      forced to recalculate layout mid-script.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> How the handler touches the DOM</div>
      <div class="seg" id="modeSeg" role="group" aria-label="write pattern">
        <button data-mode="interleaved" aria-pressed="true">Interleaved — read a size right after every write</button>
        <button data-mode="batched" aria-pressed="false">Batched — write everything, then read once</button>
      </div>
      <p class="hint" id="modeHint">Each row's height is set, then its height is immediately read back — once per row. That read forces the browser to recompute layout before it can answer.</p>

<div class="field" style="margin-top:14px">
        <div class="ctl-label">
          <span>Rows the handler updates</span>
          <span class="mono" id="countLabel">800</span>
        </div>
        <input type="range" id="count" min="50" max="2500" step="50" value="800" />
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-count="100">100 rows (barely noticeable)</button>
        <button class="btn sm" data-count="800">800 rows (typical filtered table)</button>
        <button class="btn sm" data-count="2500">2500 rows (the ticket that got filed)</button>
      </div>

<div class="btn-row" style="margin-top:16px">
        <button class="btn primary" id="runBtn">🖱️ Click to filter</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result — what the frame actually did</div>
      <div class="status" id="statusRow">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Click the button above — this reads real timing from your browser's own performance APIs.</span>
      </div>

<div class="frame-bar" id="frameBar" aria-hidden="true"></div>
      <div class="legend">
        <span><span class="swatch seg-script"></span> script execution</span>
        <span><span class="swatch seg-layout"></span> forced style/layout</span>
        <span><span class="swatch seg-idle"></span> idle / not attributed</span>
      </div>

<div class="output" id="breakdown" style="margin-top:14px"></div>
      <p class="hint" id="resultHint">
        "Interleaved" forces a layout recalculation on every single row. "Batched" forces at most one,
        at the very end — same visual result, far less forced work.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The observer reading this</div>
      <div class="code" id="codeOut"></div>
    </div>
  </div>

preview

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