prefers-reduced-motion — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 <code>prefers-reduced-motion</code> — one setting, three ways to honor it</h1>
    <p class="pg-sub">
      Pick an environment below and hit <b>Replay entrance</b>. Watch which of the three implementations
      moves and which stays still — only one of them gets it right in every environment.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Your actual browser setting</div>
      <div class="badge-row">
        <span class="pill" id="realBadge">checking…</span>
        <span class="hint" style="margin:0">
          This reads <code>matchMedia("(prefers-reduced-motion: reduce)")</code> live — flip "Reduce motion"
          in your OS accessibility settings right now and watch it change with no reload.
        </span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Simulate an environment</div>
      <p class="hint" style="margin-top:0">
        You can't flip someone else's OS setting to try this, so simulate the three environments
        your CSS actually has to handle:
      </p>
      <div class="presets" role="group" aria-label="Simulated environment">
        <div class="seg" id="simSeg">
          <button type="button" data-sim="no-preference" aria-pressed="true">No preference</button>
          <button type="button" data-sim="reduce" aria-pressed="false">Reduce motion</button>
          <button type="button" data-sim="unsupported" aria-pressed="false">Old / unsupported browser</button>
        </div>
      </div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="replay">▶️ Replay entrance</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Result — three ways to write the same swoop-in</div>
      <div class="cards">
        <div class="card">
          <h4>A — no handling</h4>
          <p>Ignores the setting completely.</p>
          <div class="swatch" id="cardA"></div>
          <div class="result" id="resultA"></div>
        </div>
        <div class="card">
          <h4>B — opt out of motion</h4>
          <p>Animates by default; <code>@media (reduce)</code> turns it off.</p>
          <div class="swatch" id="cardB"></div>
          <div class="result" id="resultB"></div>
        </div>
        <div class="card">
          <h4>C — opt in to motion</h4>
          <p>Still by default; <code>@media (no-preference)</code> turns it on.</p>
          <div class="swatch" id="cardC"></div>
          <div class="result" id="resultC"></div>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:14px" aria-live="polite">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Pick an environment, then replay.</span>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">4</span> The CSS behind B and C (what you'd actually ship)</div>
      <div class="code" id="code"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">5</span> Bonus — CSS can't touch a JS-driven loop</div>
      <p class="hint" style="margin-top:0">
        This dot moves on a plain <code>requestAnimationFrame</code> loop, the way a parallax layer or a
        custom carousel might. No CSS <code>@media</code> query has any effect on it — only a JS check does.
      </p>
      <label class="toggle">
        <input type="checkbox" id="jsRespect" checked />
        <span class="switch"></span>
        <span>this loop checks <code>matchMedia</code> before it animates</span>
      </label>
      <div class="pg-ticker-stage" style="margin-top:10px">
        <div class="pg-dot" id="pgDot"></div>
      </div>
      <p class="hint" id="jsHint"></p>
    </div>
  </div>

preview

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