스타일 타일

<div class="stage">
  <div class="tile">
    <div class="sec pal">
      <span class="sw" style="background:var(--accent)"></span>
      <span class="sw" style="background:var(--accent-2)"></span>
      <span class="sw" style="background:var(--accent-3)"></span>
      <span class="sw" style="background:var(--fg)"></span>
    </div>
    <div class="sec type">
      <div class="h">Heading</div>
      <div class="p">Body text sample</div>
    </div>
    <div class="sec ui">
      <button class="btn">Button</button>
      <span class="chip">Chip</span>
    </div>
  </div>
</div>

.stage{width:94%;height:88%}
.tile{width:100%;height:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  display:flex;flex-direction:column;overflow:hidden}
.sec{flex:1;display:flex;align-items:center;gap:10px;padding:0 6%;opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .5s ease;box-shadow:inset 0 -1px 0 var(--line)}
.sec:last-child{box-shadow:none}
.sec.on{opacity:1;transform:translateY(0)}
.sw{width:28px;height:28px;border-radius:6px}
.type{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.h{font:800 18px/1 serif;color:var(--fg)}
.p{font:400 12px/1 sans-serif;color:var(--muted)}
.btn{border:none;border-radius:20px;background:var(--accent);color:#fff;padding:6px 14px;font:700 11px/1 sans-serif}
.chip{border:1px solid var(--accent);color:var(--accent);border-radius:14px;padding:5px 12px;font:700 11px/1 sans-serif}

const secs = Array.from(document.querySelectorAll('.sec'));
let i = 0;
function reveal() {
  if (i < secs.length) { secs[i].classList.add('on'); i++; return; }
  secs.forEach((s) => s.classList.remove('on'));
  i = 0;
}
setInterval(reveal, 700);