브라우저 공통 INP 관측

<div class="atlas"><div class="head"><b>INP · coverage across engines</b><span class="pulse"></span></div><div class="stage"><div class="xinp-row"><b>Engine A</b><div><i id="xinp-a"></i></div><span id="xinp-av">—</span></div><div class="xinp-row"><b>Engine B</b><div><i id="xinp-b"></i></div><span id="xinp-bv">—</span></div><div class="xinp-row"><b>Engine C</b><div><i id="xinp-c"></i></div><span id="xinp-cv">—</span></div><div class="xinp-foot mono" id="xinp-foot">RUM sees three engines</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)}.xinp-row{display:flex;align-items:center;gap:7px;height:26%;font-size:12px}.xinp-row b{width:62px}.xinp-row div{flex:1;height:15px;border-radius:8px;background:var(--line);overflow:hidden}.xinp-row i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s}.xinp-row:nth-child(2) i{background:var(--accent-2)}.xinp-row:nth-child(3) i{background:var(--accent-3)}.xinp-row span{width:42px;text-align:right}.xinp-foot{text-align:center;color:var(--accent);font-size:12px;margin-top:6px}

let phase=0;const ids=['a','b','c'],values=['112ms','178ms','134ms'];function tick(){ids.forEach((id,i)=>{const on=i<=phase;document.getElementById('xinp-'+id).style.width=on?[44,72,55][i]+'%':'0%';document.getElementById('xinp-'+id+'v').textContent=on?values[i]:'—'});document.getElementById('xinp-foot').textContent=phase===2?'compare by engine, not CrUX alone':'Event Timing sample arrives';phase=(phase+1)%3}tick();setInterval(tick,850)