OffscreenCanvas — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Same animation, two threads: <code>OffscreenCanvas</code></h1>
    <p class="pg-sub">
      Run a spinning-dots animation on the main thread, then run the exact same animation
      in a Web Worker via <code>OffscreenCanvas</code>. Click the button on the right while
      it's running — the number it reports is real input lag, measured from your actual click.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Where should the drawing happen?</div>
      <div class="seg" id="modeSeg" role="group" aria-label="Rendering mode">
        <button class="btn" data-mode="main" aria-pressed="true">Main thread</button>
        <button class="btn" data-mode="worker" aria-pressed="false">Web Worker (OffscreenCanvas)</button>
      </div>
      <p class="hint">Switching mode stops the animation — press Start again after switching.</p>

<div class="field" style="margin-top:16px">
        <label class="label" for="costSlider">Simulated draw cost per frame: <span class="cost-value" id="costValue">60</span> ms</label>
        <input type="range" id="costSlider" min="0" max="150" value="60" step="5" />
      </div>
      <p class="hint">
        This stands in for real heavy canvas work — thousands of chart points, a dense particle
        system. Higher = more realistic "busy" frame.
      </p>

<div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="10">Light (10ms)</button>
        <button class="btn sm" data-preset="60">Heavy (60ms)</button>
        <button class="btn sm" data-preset="140">Brutal (140ms)</button>
      </div>

<div class="btn-row" style="margin-top:16px">
        <button class="btn primary" id="startBtn">▶️ Start animation</button>
        <button class="btn ghost" id="stopBtn">⏹️ Stop</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>

<div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready. Pick a mode and press Start.</span>
      </div>

<div class="heartbeat-row">
        <span class="heartbeat-dot" id="heartbeatDot"></span>
        <span class="muted">Page heartbeat — ticks every 150ms when the main thread is free to run it.</span>
      </div>

<div class="lag-readout">
        <button class="btn" id="clickTest">👉 Click me — measure input lag</button>
        <span class="big-num" id="lagNum">—</span>
      </div>
      <p class="hint" id="lagHint">
        This reads the real gap between when your click happened and when the browser got
        around to handling it. On the main thread, a busy animation makes your click wait
        in line. In a worker, it doesn't have to.
      </p>
    </div>
  </div>

preview

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