베이스라인

<div class="stage">
  <div class="frame" id="frame">
    <div class="guide cap"></div>
    <div class="guide baseline"></div>
    <div class="guide descend"></div>
    <span class="word">Typography</span>
    <div class="dot" id="dot"></div>
  </div>
  <div class="legend"><span><i class="sw cap"></i>cap-height</span><span><i class="sw base"></i>baseline</span><span><i class="sw descend"></i>descender</span></div>
</div>

.frame{position:relative;display:inline-block;padding:6px 4px}
.word{font:700 20vmin/1 Georgia,'Times New Roman',serif;color:var(--fg);position:relative;z-index:2}
.guide{position:absolute;left:-6px;right:-6px;height:1px;background:var(--line);z-index:1}
.guide.cap{top:16%}
.guide.baseline{top:78%;background:var(--accent);height:2px}
.guide.descend{top:97%}
.dot{position:absolute;top:78%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--accent-2);z-index:3;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-2) 22%, transparent)}
.legend{margin-top:16px;display:flex;gap:14px;font:11px ui-monospace,Menlo,monospace;color:var(--muted);flex-wrap:wrap;justify-content:center}
.sw{display:inline-block;width:10px;height:2px;margin-right:5px;vertical-align:middle;background:var(--line)}
.sw.base{background:var(--accent)}

const frame = document.getElementById('frame');
const dot = document.getElementById('dot');
const start = performance.now();
function loop(now){
  const w = frame.clientWidth;
  const t = ((now - start) / 2600) % 1;
  dot.style.left = (t * w) + 'px';
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);