Span

<div class="demo"><div class="title">PARENT / CHILD SPANS</div><div class="scene"><div class="track"><div class="parent">API · 120 ms</div><div class="child cache">cache · 20 ms</div><div class="child db">database · 75 ms</div></div></div></div>

.demo{width:min(94vw,690px);height:min(88vh,320px);box-sizing:border-box;padding:clamp(9px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:600 clamp(12px,2.4vmin,16px)/1.25 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);overflow:hidden}.title{color:var(--accent);font:700 clamp(12px,2.4vmin,16px)/1.2 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);letter-spacing:.04em}.scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.track{width:100%;height:75%;position:relative;border-left:2px solid var(--line);padding-left:9px;box-sizing:border-box}.track div{height:25%;padding:5px 8px;box-sizing:border-box;border-radius:5px;white-space:nowrap;overflow:hidden;font:600 clamp(12px,2.4vmin,15px)/1.2 ui-monospace,monospace}.parent{width:96%;background:color-mix(in srgb,var(--accent) 20%,var(--surface));border:1px solid var(--accent)}.child{position:absolute;left:14%;border:1px solid var(--line);animation:show 2.4s infinite}.cache{top:37%;width:28%;background:color-mix(in srgb,var(--accent-2) 24%,var(--surface))}.db{top:70%;width:66%;background:color-mix(in srgb,var(--accent-3) 24%,var(--surface));animation-delay:.5s}@keyframes show{0%,15%,100%{transform:translateX(-4px);border-color:var(--line)}40%,85%{transform:translateX(0);border-color:var(--accent)}}