Progressive Reveal

<div class="slide">
  <span class="tag" id="tag"></span>
  <div class="items">
    <p class="item" id="t0"></p>
    <p class="item" id="t1"></p>
    <p class="item" id="t2"></p>
  </div>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:9vmin 10vmin;display:flex;flex-direction:column;justify-content:center}
.tag{position:absolute;top:4%;left:4%;font:700 clamp(9px,2.2vmin,12px)/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.items{display:flex;flex-direction:column;gap:clamp(8px,2.4vmin,16px)}
.item{margin:0;font:600 clamp(10px,2.6vmin,14px)/1.35 -apple-system,sans-serif;color:var(--muted);opacity:.4;transition:all .4s ease}
.item.active{color:var(--fg);font-weight:800;opacity:1;font-size:clamp(12px,3.2vmin,17px)}

const el = (id) => document.getElementById(id);
const items = [el('t0'), el('t1'), el('t2')];
const L = {
  ko: { tag: '지금 강조 중', t: ['문제: 온보딩 이탈률이 40%다', '원인: 첫 화면에 정보가 너무 많다', '해결: 단계를 3개로 줄인다'] },
  en: { tag: 'Currently focused', t: ['Problem: onboarding drop-off is 40%', 'Cause: the first screen has too much on it', 'Fix: cut it down to 3 steps'] },
};
let n = 0;
function render() {
  const k = n % 3;
  const lang = Math.floor(n / 3) % 2 === 0 ? 'ko' : 'en';
  const t = L[lang];
  el('tag').textContent = t.tag;
  items.forEach((it, idx) => { it.textContent = t.t[idx]; it.classList.toggle('active', idx === k); });
}
render();
setInterval(() => { n++; render(); }, 1300);