Meta description

<div class="desc"><div class="bar">SEARCH RESULT PREVIEW</div><div class="url">atlas.example / guide</div><b>Choosing a compact desk</b><p id="snippet">Everything you need to know about desks.</p><div class="meter"><span id="state">VAGUE</span><div><i id="fill"></i></div></div></div>

.desc{width:min(88%,520px);padding:clamp(12px,3vmin,24px);background:var(--surface);border:1px solid var(--line);font:700 clamp(10px,2vmin,15px)/1.35 var(--font-sans);color:var(--fg);display:grid;gap:clamp(5px,1.2vmin,10px)}.bar{color:var(--accent);font-size:1em;letter-spacing:.07em}.url{color:var(--muted)}.desc b{font-size:1.3em}.desc p{margin:0;min-height:2.7em}.meter{display:flex;align-items:center;gap:9px;color:var(--accent)}.meter div{flex:1;height:7px;background:var(--line)}.meter i{display:block;width:25%;height:100%;background:var(--accent);transition:width .4s}.desc.clear .meter i{width:82%}@media(min-width:700px){body > :not(script){zoom:1.55}.map,.feed,.linkmap{height:48%}}

const box=document.querySelector('.desc'),snippet=document.querySelector('#snippet'),state=document.querySelector('#state');let clear=false;function show(){box.classList.toggle('clear',clear);snippet.textContent=clear?'Compare three compact desk sizes, delivery options, and setup space.':'Everything you need to know about desks.';state.textContent=clear?'SPECIFIC':'VAGUE'}setTimeout(()=>{clear=true;show()},650);setInterval(()=>{clear=!clear;show()},3000);