Tracking

<div class="stage">
  <h2 id="txt">DESIGN ATLAS</h2>
  <div class="readout">letter-spacing <span id="val">0.00</span>em</div>
</div>

h2{margin:0;font:800 clamp(20px,7vmin,46px)/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);text-align:center;white-space:nowrap}
.readout{margin-top:12px;font:12px/1 ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
#val{color:var(--accent);font-weight:700}

const t = document.getElementById('txt');
const v = document.getElementById('val');
const start = performance.now();
function loop(now){
  const p = (now - start) / 1800;
  const val = (Math.sin(p) * 0.5 + 0.5) * 0.42;
  t.style.letterSpacing = val.toFixed(3) + 'em';
  v.textContent = val.toFixed(2);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);