플루이드 타이포그래피

<div class="stage">
  <div class="box" id="box">
    <h2 id="h">Fluid Type</h2>
  </div>
  <div class="readout">container <span id="w">0</span>px · font-size <span id="fs">0</span>px</div>
</div>

.box{width:26%;min-width:60px;container-type:inline-size;border:1px dashed var(--line);border-radius:12px;padding:10px 6px;display:grid;place-items:center;animation:resize 4.5s ease-in-out infinite}
h2{margin:0;font-size:clamp(13px, 22cqw, 44px);font-weight:800;line-height:1.1;font-family:system-ui,-apple-system,sans-serif;color:var(--fg);text-align:center;white-space:nowrap}
@keyframes resize{0%,100%{width:22%}50%{width:88%}}
.readout{margin-top:14px;font:11px ui-monospace,Menlo,monospace;color:var(--muted)}

const box = document.getElementById('box');
const h = document.getElementById('h');
const wEl = document.getElementById('w');
const fsEl = document.getElementById('fs');
function tick(){
  wEl.textContent = Math.round(box.getBoundingClientRect().width);
  fsEl.textContent = Math.round(parseFloat(getComputedStyle(h).fontSize));
  requestAnimationFrame(tick);
}
tick();