상호작용 콘텐츠 표시

<div class="atlas"><div class="head"><b>INTERACTION CONTENTFUL PAINT</b><span class="pulse"></span></div><div class="stage"><div class="icp-click box">click → new view</div><div class="icp-candidates"><div class="icp-small" id="icp-small">heading</div><div class="icp-big" id="icp-big">content card</div></div><div class="icp-caption mono" id="icp-caption">waiting for interaction</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)}.icp-click{height:23%;display:grid;place-items:center;color:var(--accent);font-size:12px}.icp-candidates{height:55%;display:flex;gap:8px;align-items:center}.icp-small,.icp-big{opacity:.2;transition:opacity .4s,outline .3s;border-radius:5px;background:color-mix(in srgb,var(--accent) 18%,var(--bg));display:grid;place-items:center}.icp-small{width:35%;height:35%}.icp-big{flex:1;height:76%}.icp-small.on,.icp-big.on{opacity:1}.icp-big.winner{outline:2px solid var(--accent)}.icp-caption{text-align:right;color:var(--accent);font-size:12px;margin-top:4px}

let step=0;function tick(){document.getElementById('icp-small').classList.toggle('on',step>=1);document.getElementById('icp-big').classList.toggle('on',step>=2);document.getElementById('icp-big').classList.toggle('winner',step===2);document.getElementById('icp-caption').textContent=['interaction begins','small paint candidate','largest paint candidate'][step];step=(step+1)%3}tick();setInterval(tick,700)