Skip Link

<div class="page">
  <a class="skip" id="skip" href="#main">Skip to content</a>
  <div class="header">
    <div class="logo"></div>
    <div class="nav"><span></span><span></span><span></span><span></span></div>
  </div>
  <div class="main" id="main">
    <div class="h"></div>
    <div class="p"></div>
    <div class="p short"></div>
  </div>
  <div class="key" id="key"></div>
</div>

.page{position:relative;width:92%;height:88%;border-radius:12px;border:1px solid var(--line);background:var(--surface);overflow:hidden;padding:10px}
.skip{position:absolute;top:-40px;left:10px;background:var(--accent);color:#fff;font:700 11px/1 ui-monospace,monospace;padding:7px 10px;border-radius:7px;transition:top .25s ease;z-index:5;text-decoration:none}
.skip.show{top:10px}
.header{display:flex;align-items:center;gap:6%;padding-bottom:10px;border-bottom:1px solid var(--line)}
.logo{width:14%;height:14px;border-radius:4px;background:var(--muted);opacity:.4}
.nav{display:flex;gap:8%;flex:1}
.nav span{height:10px;flex:1;border-radius:4px;background:var(--muted);opacity:.25}
.main{margin-top:12px;transition:box-shadow .25s ease;border-radius:8px}
.main.hit{box-shadow:0 0 0 3px var(--accent-3)}
.h{width:44%;height:14px;border-radius:4px;background:var(--fg);opacity:.7;margin-bottom:8px}
.p{width:88%;height:8px;border-radius:4px;background:var(--muted);opacity:.3;margin-bottom:6px}
.short{width:60%}
.key{position:absolute;bottom:8px;right:10px;font:700 12px/1 ui-monospace,monospace;color:var(--muted);opacity:0}

const skip = document.getElementById('skip');
const main = document.getElementById('main');
const key = document.getElementById('key');
function showKey(label) {
  key.textContent = label;
  key.style.opacity = '1';
  setTimeout(function () { key.style.opacity = '0'; }, 500);
}
function loop() {
  showKey('⇥ Tab');
  setTimeout(function () { skip.classList.add('show'); }, 250);
  setTimeout(function () { showKey('↵ Enter'); }, 2200);
  setTimeout(function () { main.classList.add('hit'); skip.classList.remove('show'); }, 2450);
  setTimeout(function () { main.classList.remove('hit'); }, 3600);
}
loop();
setInterval(loop, 4300);