Main thread vs. Web Worker — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Does the UI freeze, or keep moving?</h1>
    <p class="pg-sub">
      The dot below is pushed a step every animation frame by plain JavaScript — while it moves
      smoothly, the main thread is free. Run the same prime-counting workload two ways and watch
      what happens to it.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The heartbeat</div>
      <div class="track"><div class="beat-dot" id="beatDot"></div></div>
      <div class="heartbeat-row">
        <span class="hint" style="margin:0">Ticks so far (one per animation frame):</span>
        <span class="beat-num" id="beatCount">0</span>
      </div>
      <p class="hint">If this stops climbing and the dot stops moving, the main thread is blocked —
        no repaint, no click, no scroll can happen until it's free again.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Pick a workload, then run it two ways</div>
      <div class="workloadRow">
        <span class="hint" style="margin:0">Workload:</span>
        <input type="range" id="workload" min="1" max="5" step="1" value="3" />
        <span class="workloadVal" id="workloadVal">Medium</span>
      </div>
      <p class="hint">Counts prime numbers up to a limit that scales with the slider — pure CPU work,
        no shortcuts, so it takes real time either way.</p>
      <div class="btn-row">
        <button class="btn bad" id="runMain">Run on main thread</button>
        <button class="btn good" id="runWorker">Run in a Web Worker</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="statusDot"></span><span id="statusText">Ready — pick a mode above.</span>
      </div>
      <div class="resultGrid">
        <div class="stat">
          <span class="lbl">Primes found</span>
          <span class="val" id="primeResult">—</span>
        </div>
        <div class="stat">
          <span class="lbl">Wall-clock time</span>
          <span class="val" id="wallTime">—</span>
        </div>
      </div>
      <div class="output log" id="log" style="margin-top:12px; max-height: 180px; overflow-y:auto"></div>
    </div>
  </div>

preview

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