퍼소나

<div class="stage">
  <div class="card">
    <div class="ph"></div>
    <div class="info">
      <div class="ln name" id="f1"></div>
      <div class="ln role" id="f2"></div>
      <div class="quote" id="f3">&#8220;<span></span>&#8221;</div>
      <div class="ln goal" id="f4"></div>
    </div>
  </div>
</div>

.stage{width:94%;height:88%}
.card{width:100%;height:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  display:flex;gap:5%;padding:6%;box-sizing:border-box;align-items:center}
.ph{flex:0 0 26%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.info{flex:1;display:flex;flex-direction:column;gap:10px}
.ln{height:14px;border-radius:4px;background:var(--line);opacity:0;transition:opacity .5s;width:0}
.ln.show{opacity:1}
.name.show{width:55%;background:var(--fg);opacity:.85}
.role.show{width:38%;background:var(--muted);opacity:.7}
.goal.show{width:70%;background:var(--accent-3);opacity:.5}
.quote{opacity:0;transition:opacity .5s;color:var(--muted);font:italic 13px/1.4 sans-serif}
.quote.show{opacity:1}

const els = ['f1', 'f2', 'f3', 'f4'].map((id) => document.getElementById(id));
let i = 0;
function reveal() {
  els.forEach((el, idx) => el.classList.toggle('show', idx <= i));
  i = (i + 1) % (els.length + 2);
}
setInterval(reveal, 700);