React Performance Tracks

<div class="scene"><div class="axis">0ms <span>time →</span> 120ms</div><div class="track"><span>Input</span><div><i class="input"></i></div></div><div class="track"><span>Scheduler</span><div><i class="sched"></i></div></div><div class="track"><span>Components</span><div><i class="component"></i></div></div><div class="playhead" id="playhead"></div><div class="label" id="note">follow the same update across tracks</div></div>

.scene{width:min(94vw,800px);height:min(86vh,320px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(9px,2.4vmin,20px);font:500 clamp(15px,4vmin,18px)/1.3 var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}.scene b,.scene strong{font-weight:700}.label{color:var(--muted)}.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pill{border:1px solid var(--line);border-radius:8px;padding:.4em .65em;background:var(--bg)}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 10%,var(--surface))!important}.axis{display:flex;justify-content:space-between;color:var(--muted);font-family:ui-monospace,monospace;font-size:.8em}.track{display:flex;gap:7px;align-items:center;margin:clamp(13px,4vmin,24px) 0}.track>span{width:28%;font-size:.85em}.track>div{height:clamp(20px,5vmin,30px);flex:1;background:var(--bg);border:1px solid var(--line);border-radius:4px;position:relative}.track i{position:absolute;top:3px;bottom:3px;border-radius:3px}.input{left:4%;width:12%;background:var(--accent-3)}.sched{left:20%;width:44%;background:var(--accent-2)}.component{left:35%;width:49%;background:var(--accent)}.playhead{height:4px;background:var(--accent-3);width:0;transition:width .55s}.label{text-align:center;margin-top:8px}

let n=0;function tick(){document.getElementById("playhead").style.width=(n%6*20)+"%";document.getElementById("note").textContent=["input arrives","scheduler queues work","render begins","components render","commit completes","trace complete"][n%6];n++}tick();setInterval(tick,700)