requestIdleCallback vs. a busy page — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 requestIdleCallback vs. a busy page</h1>
    <p class="pg-sub">
      Turn up the simulated load below, then schedule a background task with
      <code>requestIdleCallback</code> and watch whether the browser ever finds
      a moment to run it.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Simulate main-thread load</div>
      <div class="field">
        <label class="ctl-label" for="load">Work per animation frame: <span id="loadVal">0</span> ms</label>
        <input type="range" id="load" min="0" max="35" step="1" value="0" />
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="0">Quiet page</button>
        <button class="btn sm" data-preset="10">Normal scrolling</button>
        <button class="btn sm" data-preset="30">Heavy load (near-never idle)</button>
      </div>
      <p class="hint">
        This is real work running on this page's own main thread — the same way a
        scroll handler, an animation, or a chat widget keeps a real page busy.
        Higher values leave less (or no) idle time for the browser to hand out.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Schedule a background task</div>
      <div class="btn-row">
        <button class="btn primary" id="schedule">Schedule idle task</button>
        <button class="btn ghost" id="cancel">Cancel pending</button>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="timeout" /><span class="switch"></span>
          <span>force with <code>timeout: 1500</code></span>
        </label>
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — schedule a task and watch it wait.</span>
      </div>
      <p class="hint" id="hint">Nothing scheduled yet.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Log</div>
      <div class="log" id="log"></div>
      <div class="btn-row" style="margin-top:10px">
        <button class="btn sm ghost" id="clearLog">Clear log</button>
      </div>
    </div>
  </div>

preview

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