clamp() fluid type — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Build a <code>clamp()</code> formula and watch it scale</h1>
    <p class="pg-sub">
      Drag the viewport slider to simulate resizing the browser. Compare the old
      media-query "staircase" against <code>clamp(MIN, PREFERRED, MAX)</code> — then
      flip the accessibility toggle to see why the preferred value should mix
      <code>rem</code> with <code>vw</code>, not use <code>vw</code> alone.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Simulated viewport width</div>
      <div class="field">
        <div class="ctl-label">
          <span>Width</span>
          <span class="mono" id="widthLabel">800px</span>
        </div>
        <input type="range" id="width" min="320" max="1600" step="1" value="800" />
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-w="375">📱 Phone · 375px</button>
        <button class="btn sm" data-w="768">📟 Tablet · 768px</button>
        <button class="btn sm" data-w="1280">💻 Laptop · 1280px</button>
        <button class="btn sm" data-w="1600">🖥️ Desktop · 1600px</button>
      </div>

<div class="btn-row" style="margin-top:16px">
        <div class="seg" id="modeSeg" role="group" aria-label="Sizing mode">
          <button data-mode="media" aria-pressed="true">Old way: media queries</button>
          <button data-mode="clamp" aria-pressed="false">New way: clamp()</button>
        </div>
      </div>

<label class="toggle" style="margin-top:14px">
        <input type="checkbox" id="a11ySetting" /><span class="switch"></span>
        <span>Simulate a reader who bumped their browser's default font size to 24px (was 16px)</span>
      </label>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="frame-wrap">
        <div class="frame" id="frame">
          <span class="frame-label" id="frameLabel">viewport: 800px</span>
          <h2 id="heading">Fluid heading</h2>
        </div>
      </div>
      <div class="status" style="margin-top:12px" id="statusRow">
        <span class="dot good" id="dot"></span>
        <span id="statusText">font-size: 32px (2rem)</span>
      </div>
      <p class="hint" id="hint">
        Drag the width slider slowly across 480–992px — watch the old way jump between
        five fixed sizes, while <code>clamp()</code> slides through every value in between.
      </p>
      <canvas class="curve" id="curve" width="600" height="140"></canvas>
      <p class="hint">
        The line is font-size across every viewport width from 320px to 1600px. The dot marks
        where you are right now. Steps = media queries. A smooth line = <code>clamp()</code>.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The CSS this produces</div>
      <div class="code" id="codeOut">font-size: clamp(1.5rem, 1rem + 2vw, 3rem);</div>
      <p class="hint" id="a11yHint">
        This formula mixes a <code>rem</code> term, so it still grows when a reader's
        browser font-size setting grows.
      </p>
    </div>
  </div>

preview

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