로빙 탭인덱스

<div class="stage">
  <div class="toolbar">
    <div class="item i0"><div class="ic"></div><div class="ti">0</div></div>
    <div class="item i1"><div class="ic"></div><div class="ti">-1</div></div>
    <div class="item i2"><div class="ic"></div><div class="ti">-1</div></div>
    <div class="item i3"><div class="ic"></div><div class="ti">-1</div></div>
  </div>
  <div class="hint" id="hint">⇥ Tab enters once</div>
</div>

.stage{width:92%;height:80%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12%}
.toolbar{display:flex;gap:6%;padding:5% 6%;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.item{display:flex;flex-direction:column;align-items:center;gap:8px}
.ic{width:11vmin;max-width:44px;aspect-ratio:1;border-radius:9px;border:1px solid var(--line);background:var(--bg)}
.item.active .ic{box-shadow:0 0 0 3px var(--accent)}
.ti{font:700 11px/1 ui-monospace,monospace;color:var(--muted)}
.item.active .ti{color:var(--accent);font-weight:800}
.hint{font:700 12px/1 ui-monospace,monospace;color:var(--muted);min-height:14px}

const items = [0, 1, 2, 3].map(function (i) { return document.querySelector('.i' + i); });
const hint = document.getElementById('hint');
let active = 0;
function render() {
  items.forEach(function (el, i) {
    el.classList.toggle('active', i === active);
    el.querySelector('.ti').textContent = i === active ? '0' : '-1';
  });
}
render();
let step = 0;
function tick() {
  if (step === 0) {
    hint.textContent = '⇥ Tab enters once';
  } else {
    active = (active + 1) % items.length;
    render();
    hint.textContent = '→ moves the roving index';
  }
  step = (step + 1) % items.length;
}
setInterval(tick, 1000);