Cumulative Layout Shift

<div class="atlas"><div class="head"><b>CLS · reserve the space</b><span class="pulse"></span></div><div class="stage"><div class="cls-cols"><div class="cls-col box"><b>no reserved size</b><div class="cls-slot" id="cls-late"></div><div class="cls-button">Continue</div></div><div class="cls-col box"><b>reserved size</b><div class="cls-slot reserved"><i></i></div><div class="cls-button">Continue</div></div></div><div class="cls-note" id="cls-note">image arrives → left button jumps</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)}.cls-cols{height:82%;display:flex;gap:8px}.cls-col{flex:1;min-width:0;padding:8px;display:flex;flex-direction:column;align-items:stretch;gap:6px}.cls-col b{font-size:12px;color:var(--muted)}.cls-slot{height:0;background:color-mix(in srgb,var(--accent) 28%,var(--bg));border-radius:5px;transition:height .5s}.cls-slot.show{height:38%}.cls-slot.reserved{height:38%;display:grid;place-items:center}.cls-slot i{width:50%;height:35%;background:var(--accent);border-radius:50%}.cls-button{background:var(--accent);color:white;border-radius:5px;text-align:center;padding:5px}.cls-note{text-align:center;color:var(--accent);font-size:12px;margin-top:4px}

let shown=false;function tick(){shown=!shown;document.getElementById('cls-late').classList.toggle('show',shown);document.getElementById('cls-note').textContent=shown?'image arrives → left button jumps':'slot missing → button sits too high'}tick();setInterval(tick,2200)