리소스 폭포

<div class="atlas"><div class="head"><b>RESOURCE WATERFALL</b><span class="pulse"></span></div><div class="stage"><div class="wf-scale mono">0 <span>time →</span></div><div class="wf-row"><span>HTML</span><i class="wf-bar html"></i></div><div class="wf-row"><span>CSS</span><i class="wf-bar css" id="wf-css"></i></div><div class="wf-row"><span>hero</span><i class="wf-bar hero" id="wf-hero"></i></div><div class="wf-end mono" id="wf-end">serial discovery</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)}.wf-scale{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);padding-bottom:4px}.wf-row{height:25%;display:flex;align-items:center;gap:8px}.wf-row span{width:36px;font-size:12px}.wf-bar{height:16px;border-radius:4px;transition:margin-left .6s}.wf-bar.html{margin-left:0;width:27%;background:var(--accent)}.wf-bar.css{margin-left:27%;width:25%;background:var(--accent-2)}.wf-bar.hero{margin-left:52%;width:35%;background:var(--accent-3)}.wf-end{text-align:right;color:var(--accent);font-size:12px}

let early=false;function tick(){early=!early;document.getElementById('wf-css').style.marginLeft=early?'5%':'27%';document.getElementById('wf-hero').style.marginLeft=early?'10%':'52%';document.getElementById('wf-end').textContent=early?'parallel discovery':'serial discovery'}tick();setInterval(tick,2200)