<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0f0f10;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.stage{position:absolute;inset:0;display:grid;place-items:center;container-type:size}
body,.stage{background:#ece7de}.tb{position:relative;display:flex;background:#fff;border-radius:999px;padding:.6cqw;box-shadow:0 8px 24px -14px rgba(0,0,0,.4)}
.tb span{position:relative;z-index:1;width:13cqw;text-align:center;padding:1.2cqw 0;font-weight:700;font-size:2cqw;color:#57534e;transition:color .3s}
.tb span.on{color:#fff}.pl{position:absolute;top:.6cqw;bottom:.6cqw;left:.6cqw;width:13cqw;border-radius:999px;background:#1c1917;transition:transform .45s cubic-bezier(.65,0,.35,1),width .45s}
</style></head>
<body><div class="stage"><div class="tb" id="tb"><div class="pl" id="pl"></div><span class="on">Home</span><span>Library</span><span>Studio</span><span>Agents</span></div></div><script>var t=[].slice.call(document.querySelectorAll("#tb span")),p=document.getElementById("pl"),i=0;setInterval(function(){t[i].classList.remove("on");i=(i+1)%t.length;p.style.transform="translateX("+(i*100)+"%)";t[i].classList.add("on")},900);</script></body></html>