will-change — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 How many layers is <code>will-change</code> actually promoting?</h1>
    <p class="pg-sub">
      Every tile below is a real DOM element with real hover transitions. Pick a mode,
      set how many tiles are on the page, then hover a few — the counters below are
      live, not simulated, counting elements that currently carry <code>will-change: transform</code>.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Mode</div>
      <div class="seg" id="modeSeg" role="group" aria-label="will-change mode">
        <button data-mode="none" aria-pressed="false">No hint</button>
        <button data-mode="always" aria-pressed="true">Always on</button>
        <button data-mode="temp" aria-pressed="false">Temporary — on hover, removed after</button>
      </div>
      <p class="hint" id="modeHint">Every tile carries <code>will-change: transform</code> all the time, whether it's ever touched or not.</p>

<div class="field" style="margin-top:14px">
        <div class="ctl-label">
          <span>Tiles on the page</span>
          <span class="mono" id="countLabel">24</span>
        </div>
        <input type="range" id="count" min="4" max="150" step="1" value="24" />
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-count="4">1 card (the demo everyone sees)</button>
        <button class="btn sm" data-count="24">24 cards (a typical grid)</button>
        <button class="btn sm" data-count="150">150 cards (a real dashboard)</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result — hover a few tiles</div>
      <div class="grid" id="grid"></div>

<div class="counters">
        <div class="counter">
          <span class="big-num mono" id="promotedNow">0</span>
          <span class="counter-label">layers promoted <strong>right now</strong></span>
        </div>
        <div class="counter">
          <span class="big-num mono" id="promotedPeak">0</span>
          <span class="counter-label">peak layers promoted <strong>at once</strong></span>
        </div>
      </div>

<div class="status" id="statusRow" style="margin-top:12px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Hover a tile to see what happens.</span>
      </div>
      <p class="hint" id="resultHint">
        "Always on" promotes every tile the instant you move the slider — before you've hovered anything.
        "Temporary" only promotes a tile between <code>pointerenter</code> and the moment its transition ends.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What this mode actually does</div>
      <div class="code" id="codeOut"></div>
    </div>
  </div>

preview

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