페차쿠차

<div class="slide">
  <div class="mini" id="mini"></div>
  <div class="ringwrap">
    <svg viewBox="0 0 44 44" class="ring">
      <circle cx="22" cy="22" r="18" class="track"></circle>
      <circle cx="22" cy="22" r="18" class="prog" id="prog"></circle>
    </svg>
    <span class="cnt" id="cnt">20</span>
  </div>
  <p class="lbl" id="lbl"></p>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%}
.mini{width:60%;height:32%;border-radius:8px;transition:background .3s ease}
.ringwrap{position:relative;width:22%;aspect-ratio:1}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.track{fill:none;stroke:var(--line);stroke-width:4}
.prog{fill:none;stroke:var(--accent-3);stroke-width:4;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:0}
.cnt{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(10px,2.6vmin,14px)/1 monospace;color:var(--fg)}
.lbl{margin:0;font:700 clamp(9px,2.2vmin,12px)/1.2 -apple-system,sans-serif;color:var(--muted)}

const prog = document.getElementById('prog');
const cnt = document.getElementById('cnt');
const mini = document.getElementById('mini');
const lbl = document.getElementById('lbl');
const colors = ['var(--accent)', 'var(--accent-2)', 'var(--accent-3)'];
const L = { ko: (i) => '슬라이드 ' + i + ' / 20 · 20초', en: (i) => 'Slide ' + i + ' / 20 · 20s' };
const DUR = 2200;
let slideN = 1, lang = 'ko', tickTimer = null;
function startSlide() {
  mini.style.background = colors[(slideN - 1) % colors.length];
  lbl.textContent = L[lang](slideN);
  prog.style.transition = 'none';
  prog.style.strokeDashoffset = '0';
  void prog.getBoundingClientRect();
  prog.style.transition = 'stroke-dashoffset ' + DUR + 'ms linear';
  prog.style.strokeDashoffset = '113';
  let secLeft = 20;
  cnt.textContent = String(secLeft);
  clearInterval(tickTimer);
  tickTimer = setInterval(() => {
    secLeft -= 1;
    if (secLeft < 0) return;
    cnt.textContent = String(secLeft);
  }, DUR / 20);
}
function nextSlide() {
  slideN = (slideN % 20) + 1;
  if (slideN === 1) lang = lang === 'ko' ? 'en' : 'ko';
  startSlide();
}
startSlide();
setInterval(nextSlide, DUR);