리거처

<div class="stage">
  <div class="frame">
    <span class="word" id="w">waffle office</span>
  </div>
  <div class="readout"><span id="mode">font-variant-ligatures: common-ligatures</span></div>
</div>

.frame{position:relative}
.word{font-size:9vmin;line-height:1.3;font-family:Georgia,'Times New Roman',serif;color:var(--fg)}
.readout{margin-top:16px;font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
#mode{color:var(--accent)}

const w = document.getElementById('w');
const mode = document.getElementById('mode');
let on = true;
function apply(){
  w.style.fontVariantLigatures = on ? 'common-ligatures' : 'none';
  mode.textContent = 'font-variant-ligatures: ' + (on ? 'common-ligatures' : 'none');
  on = !on;
}
apply();
setInterval(apply, 1700);