Exponential backoff — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Exponential backoff vs. retrying immediately</h1>
    <p class="pg-sub">
      Same overloaded server, same number of clients, two retry strategies. Watch what
      each one does to the <strong>load the server sees over time</strong> — not just
      whether requests eventually succeed.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Set up the storm</div>

<div class="btn-row" style="margin-bottom:12px">
        <span class="hint" style="margin:0 8px 0 0">Retry strategy:</span>
        <div class="seg" id="strategySeg" role="group" aria-label="Retry strategy">
          <button type="button" data-strategy="immediate" aria-pressed="true">Retry immediately</button>
          <button type="button" data-strategy="backoff" aria-pressed="false">Exponential backoff + jitter</button>
        </div>
      </div>

<div class="field" style="margin-bottom:10px">
        <label class="ctl-label" for="clients">Clients retrying at once: <strong id="clientsVal">20</strong></label>
        <input type="range" id="clients" min="5" max="50" step="1" value="20" />
      </div>

<div class="btn-row">
        <button class="btn primary" id="run">▶ Run simulation</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>

<div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="blip">Small blip (10 clients)</button>
        <button class="btn sm" data-preset="outage">Real outage (40 clients)</button>
      </div>
      <p class="hint">
        The server can only handle <strong>5 requests per tick</strong> before it starts
        returning errors. Every client that fails retries on its own — the only
        difference below is <em>when</em>.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Load on the server, tick by tick</div>
      <div class="chart" id="chart" aria-hidden="true"></div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Pick a strategy and hit Run.</span>
      </div>
      <p class="hint" id="caption">
        Each bar is one tick. Green = requests the server served; red = requests it rejected
        because it was already over capacity that tick.
      </p>

<div class="stats">
        <div class="stat"><div class="label">Worst retry pile-up (after tick 0)</div><div class="big-num" id="statPeak">—</div></div>
        <div class="stat"><div class="label">Total attempts sent</div><div class="big-num" id="statTotal">—</div></div>
        <div class="stat"><div class="label">Ticks until everyone succeeded</div><div class="big-num" id="statTicks">—</div></div>
      </div>
      <p class="hint" style="margin-top:10px">
        This is a simplified simulation built to show the shape of the problem, not a
        real network trace — the point is the <em>pattern</em>, not the exact numbers.
      </p>
    </div>
  </div>

preview

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