Design Atlas
한국어
▣ Presentation & slides

Pecha Kucha

페차쿠차

A talk format of exactly 20 slides, 20 seconds each, auto-advancing to a hard stop at 6 minutes 40 seconds.

Also known as: 20x20PechaKucha Night
···
html
<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>
css
.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)}
js
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);

Pecha Kucha was invented in Tokyo in 2003 by Astrid Klein and Mark Dytham of Klein Dytham architecture. Because each slide advances automatically after 20 seconds, the presenter can never linger on one slide, and the audience never gets bored either.

The demo compresses that auto-advancing rhythm — a circular timer counts down, and the moment it hits zero the deck jumps to the next slide. The point is that the slide controls the clock, not the presenter.

Checklist: does the deck hold to 20 slides at 20 seconds each (6 minutes 40 seconds total), does an automatic timer drive the transitions instead of the presenter, has the script been rehearsed against the actual 20-second limit per slide.

When to use

Use it for lightning talks, design studio nights, and demo nights where keeping strictly to time matters more than depth.