세리프

<div class="stage">
  <div class="frame">
    <span class="word">Serif</span>
    <div class="spot" id="spot"></div>
  </div>
  <div class="readout">획 끝의 작은 "발"(foot) — 세리프</div>
</div>

.frame{position:relative;display:inline-block}
.word{font:800 22vmin/1 Georgia,'Times New Roman',serif;color:var(--fg)}
.spot{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;border:2px solid var(--accent-2);box-shadow:0 0 0 5px color-mix(in srgb, var(--accent-2) 16%, transparent);transition:left .8s ease,top .8s ease;pointer-events:none}
.readout{margin-top:16px;font:12px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}

const spot = document.getElementById('spot');
const positions = [[6,80],[26,84],[44,80],[62,16],[80,10]];
let i = 0;
function apply(){
  const p = positions[i];
  spot.style.left = 'calc(' + p[0] + '% - 7.5%)';
  spot.style.top = 'calc(' + p[1] + '% - 7.5%)';
  i = (i + 1) % positions.length;
}
apply();
setInterval(apply, 900);