부분 사전 렌더링

<section class="stage"><div class="heading">PARTIAL PRERENDER <span class="hint">shell + dynamic hole</span></div><div class="ppr"><div class="chrome">SITE HEADER</div><div class="columns"><div class="story"><i></i><i></i><i></i></div><div class="hole"><span class="waiting">ACCOUNT ▬▬</span><span class="arrived">Hello, Ada</span></div></div></div><div class="caption">The shell paints while a request-bound slot waits</div></section>

.stage{width:min(94vw,780px);height:min(88vh,322px);padding:clamp(12px,3vmin,20px);border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 12px 36px #0001;display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:500 clamp(12px,3.5vmin,17px)/1.3 var(--font-sans,system-ui,sans-serif);overflow:hidden}.heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:750;color:var(--accent)}.hint{color:var(--muted);font-size:clamp(12px,3.2vmin,14px);font-weight:500}.caption{margin-top:auto;color:var(--muted);font-size:clamp(12px,3.2vmin,14px)}.row{display:flex;gap:clamp(5px,1.5vmin,12px);align-items:center}.tile{padding:clamp(6px,1.8vmin,13px);border:1px solid var(--line);border-radius:9px;background:var(--bg);text-align:center;min-width:0}.arrow{color:var(--accent);font-weight:800}.stage [data-on]{transition:background .3s,border-color .3s,opacity .3s,transform .3s}.stage .on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}.ppr{flex:1;min-height:75px;border:1px solid var(--line);border-radius:9px;overflow:hidden}.chrome{height:28%;background:color-mix(in srgb,var(--accent) 15%,var(--surface));padding:5px 10px;font-weight:750;color:var(--accent)}.columns{display:flex;height:72%;gap:8px;padding:8px}.story{flex:2;display:flex;flex-direction:column;gap:5px}.story i{height:8px;border-radius:8px;background:var(--accent-2);opacity:.6}.story i:nth-child(2){width:85%}.story i:nth-child(3){width:55%}.hole{flex:1;border:2px dashed var(--accent-3);border-radius:6px;display:grid;place-items:center;padding:3px;min-width:0;text-align:center}.waiting{color:var(--muted);animation:breath 1s infinite alternate}.arrived{display:none;color:var(--accent);font-weight:750}@keyframes breath{to{opacity:.3}}.stage[data-step="1"] .waiting,.stage[data-step="2"] .waiting{display:none}.stage[data-step="1"] .arrived,.stage[data-step="2"] .arrived{display:block}.stage[data-step="1"] .hole,.stage[data-step="2"] .hole{border-style:solid;border-color:var(--accent)}.stage small,.stage button,.stage .cards b,.stage .phase b,.stage .pair b,.stage .tree-mini b{font-size:clamp(12px,3.2vmin,14px)!important}

const stage=document.querySelector(".stage");let step=0;function tick(){stage.dataset.step=String(step);step=(step+1)%3}tick();let timer=setInterval(tick,1000);stage.addEventListener("pointerdown",()=>{clearInterval(timer);tick()})