localStorage vs IndexedDB — watch the main thread freeze

<div class="pg">
    <h1 class="pg-title">🎮 Does the animation freeze?</h1>
    <p class="pg-sub">
      The blue dot slides back and forth on every animation frame — as long as the main
      thread is free to run it. Pick a payload size, then fire it at
      <code>localStorage.setItem</code> (synchronous) or <code>IndexedDB</code> (asynchronous)
      and watch what happens to the dot, not just the numbers.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a payload size</div>
      <div class="presets" id="presets">
        <button class="btn sm" data-size="0.1" aria-pressed="false">100 KB</button>
        <button class="btn sm" data-size="1" aria-pressed="true">1 MB</button>
        <button class="btn sm" data-size="3" aria-pressed="false">3 MB</button>
        <button class="btn sm" data-size="6" aria-pressed="false">6 MB</button>
      </div>
      <p class="hint">Bigger payload → more work for <code>JSON.stringify</code> and the write itself. 6 MB may even hit some browsers' storage quota — that's the point.</p>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn bad" id="runLocal">Write with localStorage (sync)</button>
        <button class="btn good" id="runIdb">Write with IndexedDB (async)</button>
        <button class="btn ghost sm" id="clear">Clear storage</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Watch the dot</div>
      <div class="stage" id="stage"><div class="runner" id="runner"></div></div>
      <div class="stage-caption">
        <span>Smooth = main thread free. Frozen = main thread blocked.</span>
        <span id="fps">— fps</span>
      </div>
      <div class="metrics">
        <div class="metric">
          <div class="k">setItem() call took</div>
          <div class="v" id="mCall">—</div>
        </div>
        <div class="metric">
          <div class="k">Longest frame gap</div>
          <div class="v" id="mGap">—</div>
        </div>
        <div class="metric">
          <div class="k">Dropped frames</div>
          <div class="v" id="mDrop">—</div>
        </div>
      </div>
      <div class="status" style="margin-top:12px">
        <span class="dot info" id="dotStatus"></span><span id="statusText">Ready — pick a size, then write.</span>
      </div>
      <p class="hint" id="hint">
        <code>localStorage.setItem</code> is spec'd as synchronous: nothing else on this
        thread — including the animation frame that moves the dot — runs until it returns.
        <code>IndexedDB</code> hands back a request immediately; the actual write happens
        off the call stack, so the dot keeps sliding.
      </p>
    </div>
  </div>

preview

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