프레이밍 효과

<div class="frame"><div class="dial"><span>80 / 100</span></div><div class="words"><b id="headline">80 SUCCEEDED</b><small>SAME OUTCOME · DIFFERENT FRAME</small><button id="swap">CHANGE FRAME</button></div></div>

@media(min-width:700px){body>div{transform:scale(1.45)}}.frame{display:flex;align-items:center;gap:clamp(12px,5vmin,44px);width:min(90%,590px);font-family:sans-serif}.dial{width:clamp(92px,30vmin,240px);height:clamp(92px,30vmin,240px);border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) 0 80%,var(--line) 80%);flex:none}.dial:before{content:'';position:absolute;width:clamp(68px,22vmin,177px);height:clamp(68px,22vmin,177px);background:var(--bg);border-radius:50%}.dial span{z-index:1;font:900 clamp(13px,4vmin,28px)/1 sans-serif}.words{min-width:0}.words b{display:block;color:var(--accent);font:900 clamp(17px,5vmin,46px)/.95 sans-serif;letter-spacing:-.05em}.words small{display:block;margin:clamp(8px,2vmin,16px) 0;color:var(--muted);font:800 clamp(10px,max(1.5vmin,1vw),12px)/1.2 sans-serif}.words button{border:1px solid var(--fg);background:var(--surface);color:var(--fg);padding:clamp(5px,1.5vmin,10px);font:800 clamp(10px,max(1.5vmin,1vw),12px) sans-serif;cursor:pointer}

const title=document.querySelector('#headline');let mode=0;function swap(){mode=1-mode;title.textContent=mode?'20 MISSED':'80 SUCCEEDED'}const timer=setInterval(swap,1400);document.querySelector('#swap').addEventListener('click',()=>{clearInterval(timer);swap()});