Largest Contentful Paint

<div class="atlas"><div class="head"><b>LCP · largest candidate</b><span class="pulse"></span></div><div class="stage"><div class="lcp-page box"><div class="lcp-top"><i></i><span>Headline</span></div><div class="lcp-hero" id="lcp-hero"><div class="sun"></div><div class="mount"></div></div></div><div class="lcp-time mono"><span id="lcp-label">text candidate</span><b id="lcp-value">0.8s</b></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)}.lcp-page{height:78%;padding:10px;display:flex;flex-direction:column;gap:8px}.lcp-top{display:flex;align-items:center;gap:8px}.lcp-top i{width:20px;height:10px;background:var(--line);border-radius:4px}.lcp-hero{flex:1;border-radius:6px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 18%,var(--bg)),color-mix(in srgb,var(--accent-2) 30%,var(--bg)));position:relative;overflow:hidden;opacity:.15;transition:opacity .5s,outline .3s}.lcp-hero.on{opacity:1;outline:3px solid var(--accent)}.sun{position:absolute;left:65%;top:14%;width:24px;height:24px;border-radius:50%;background:var(--accent-2)}.mount{position:absolute;inset:40% -5% -20%;background:var(--accent);clip-path:polygon(0 90%,35% 12%,57% 62%,75% 26%,100% 82%,100% 100%,0 100%)}.lcp-time{display:flex;justify-content:space-between;margin-top:5px;color:var(--accent)}

let big=false;function tick(){big=!big;document.getElementById('lcp-hero').classList.toggle('on',big);document.getElementById('lcp-label').textContent=big?'image candidate':'text candidate';document.getElementById('lcp-value').textContent=big?'2.1s':'0.8s'}tick();setInterval(tick,2200)