무드보드

<div class="stage">
  <div class="board" id="board">
    <div class="tile t1"></div>
    <div class="tile t2"></div>
    <div class="tile t3 type">Aa</div>
    <div class="tile t4"></div>
    <div class="tile t5"></div>
    <div class="tile t6 type">Ag</div>
  </div>
</div>

.stage{width:94%;height:88%}
.board{position:relative;width:100%;height:100%}
.tile{position:absolute;border-radius:8px;opacity:0;transform:scale(.85) rotate(0deg);
  transition:opacity .6s ease,transform .6s ease;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.t1{left:2%;top:8%;width:26%;height:46%;background:linear-gradient(160deg,var(--accent),var(--accent-2))}
.t2{left:30%;top:4%;width:20%;height:26%;background:var(--accent-3)}
.t3{left:30%;top:32%;width:20%;height:22%;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font:800 20px serif;color:var(--fg)}
.t4{left:52%;top:8%;width:24%;height:34%;background:repeating-linear-gradient(45deg,var(--line) 0 6px,var(--surface) 6px 12px)}
.t5{left:78%;top:4%;width:20%;height:50%;background:linear-gradient(200deg,var(--accent-2),var(--accent))}
.t6{left:52%;top:44%;width:24%;height:18%;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;font:400 18px sans-serif;color:var(--fg)}
.tile.on{opacity:1;transform:scale(1) rotate(var(--r,0deg))}
.t1.on{--r:-2deg}.t2.on{--r:1deg}.t4.on{--r:2deg}.t5.on{--r:-1deg}

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