대체 텍스트

<div class="stage" id="stage">
  <div class="pane">
    <div class="ph"></div>
    <div class="tag ok">Good</div>
    <div class="say" id="s1"></div>
  </div>
  <div class="pane">
    <div class="ph"></div>
    <div class="tag bad">Bad</div>
    <div class="say" id="s2"></div>
  </div>
  <div class="pane">
    <div class="ph deco"></div>
    <div class="tag deco">Decorative</div>
    <div class="say" id="s3"></div>
  </div>
</div>

.stage{width:96%;height:90%;display:flex;gap:3%}
.pane{position:relative;flex:1;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;padding:8% 4% 6%;gap:7%}
.ph{width:100%;flex:1;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-3));opacity:.85}
.ph.deco{opacity:.3}
.tag{font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.tag.ok{color:var(--accent-3)}
.tag.bad{color:var(--accent-2)}
.say{width:100%;min-height:26px;font:9.5px/1.3 ui-monospace,monospace;color:var(--fg);text-align:center;opacity:0;transition:opacity .3s ease}
.say.on{opacity:1}
.say.muted{color:var(--muted);font-style:italic}

const items = [
  { id: 's1', text: 'golden retriever, beach', muted: false },
  { id: 's2', text: 'IMG_2043.jpg', muted: false },
  { id: 's3', text: '(skipped)', muted: true },
];
function run() {
  items.forEach(function (it, i) {
    setTimeout(function () {
      const el = document.getElementById(it.id);
      el.textContent = it.text;
      if (it.muted) el.classList.add('muted');
      el.classList.add('on');
    }, i * 600);
  });
  setTimeout(function () {
    items.forEach(function (it) { document.getElementById(it.id).classList.remove('on'); });
  }, 3600);
}
run();
setInterval(run, 4400);