자막

<div class="stage">
  <div class="player">
    <div class="screen"><div class="play"></div></div>
    <div class="bar"><div class="fill" id="fill"></div></div>
    <div class="cap" id="cap"></div>
  </div>
</div>

.stage{width:78%;height:88%;display:grid;place-items:center}
.player{width:100%;height:100%;border-radius:14px;overflow:hidden;background:#0d0d12;position:relative;display:flex;flex-direction:column}
.screen{flex:1;display:grid;place-items:center;background:linear-gradient(135deg,#1c1c26,#0d0d12)}
.play{width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:22px solid rgba(255,255,255,.65)}
.bar{height:4px;background:rgba(255,255,255,.15)}
.fill{height:100%;width:0;background:var(--accent)}
.cap{min-height:30px;display:flex;align-items:center;justify-content:center;padding:6px 8%;font:700 clamp(10px,3vmin,13px)/1.2 ui-monospace,monospace;color:#fff;text-align:center;background:rgba(0,0,0,.55)}

const fill = document.getElementById('fill');
const cap = document.getElementById('cap');
const lines = [
  { t: 0, text: 'Welcome back to the show.' },
  { t: 20, text: '[applause]' },
  { t: 45, text: "Today we're talking accessibility." },
  { t: 70, text: '[phone ringing]' },
  { t: 90, text: "Let's dive right in." },
];
const DURATION = 6000;
const start = Date.now();
function frame() {
  const elapsed = (Date.now() - start) % DURATION;
  const pct = (elapsed / DURATION) * 100;
  fill.style.width = pct + '%';
  let current = '';
  for (let i = 0; i < lines.length; i++) {
    if (pct >= lines[i].t) current = lines[i].text;
  }
  cap.textContent = current;
  requestAnimationFrame(frame);
}
frame();