Time to First Byte

<div class="atlas"><div class="head"><b>TTFB · first byte</b><span class="pulse"></span></div><div class="stage"><div class="ttfb-route"><div class="ttfb-node" id="ttfb-0">request</div><div class="ttfb-wire"></div><div class="ttfb-node" id="ttfb-1">network</div><div class="ttfb-wire"></div><div class="ttfb-node" id="ttfb-2">server</div><div class="ttfb-wire"></div><div class="ttfb-node" id="ttfb-3">1st byte</div></div><div class="ttfb-meter"><i id="ttfb-bar"></i></div><div class="ttfb-label mono" id="ttfb-label">request starts</div></div></div>

.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.ttfb-route{display:flex;align-items:center;justify-content:space-between;height:62%}.ttfb-node{flex:0 1 23%;min-width:0;padding:12px 2px;border:1px solid var(--line);border-radius:7px;text-align:center;background:var(--bg);font-size:12px}.ttfb-node.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg))}.ttfb-wire{flex:1;height:2px;background:var(--line)}.ttfb-meter{height:12px;border-radius:10px;background:var(--line);overflow:hidden}.ttfb-meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .35s}.ttfb-label{text-align:right;margin-top:8px;color:var(--accent)}

let phase=0;const labels=['request starts','connection ready','server prepares','first byte received'];function tick(){for(let i=0;i<4;i++)document.getElementById('ttfb-'+i).classList.toggle('on',i===phase);document.getElementById('ttfb-bar').style.width=(phase+1)*25+'%';document.getElementById('ttfb-label').textContent=labels[phase];phase=(phase+1)%4}tick();setInterval(tick,750)