프로토타입

<div class="stage">
  <div class="phone">
    <div class="screen a" id="scrA">
      <div class="hd">Inbox</div>
      <div class="row"></div>
      <div class="row hl" id="rowHl"></div>
      <div class="row"></div>
    </div>
    <div class="screen b" id="scrB">
      <div class="hd"><span class="back" id="backBtn">&#8592;</span> Detail</div>
      <div class="body-ln w1"></div>
      <div class="body-ln w2"></div>
      <div class="body-ln w3"></div>
    </div>
    <div class="cur" id="cur">&#10148;</div>
  </div>
</div>

.stage{width:76%;height:92%;max-width:300px}
.phone{position:relative;width:100%;height:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:8%;padding:9% 8%;box-sizing:border-box;
  background:var(--surface);transition:transform .5s ease}
.hd{font:700 12px/1 sans-serif;color:var(--fg);display:flex;align-items:center;gap:6px;box-shadow:inset 0 -1px 0 var(--line);padding-bottom:8%}
.back{color:var(--accent);font-weight:700}
.row{height:16%;border-radius:8px;background:var(--line)}
.row.hl{background:color-mix(in srgb, var(--accent) 25%, var(--surface));border:1px solid var(--accent)}
.body-ln{height:10%;border-radius:3px;background:var(--line)}
.body-ln.w1{width:100%}.body-ln.w2{width:85%}.body-ln.w3{width:60%}
.screen.b{transform:translateX(100%)}
.cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg);z-index:5;left:10%;top:90%}
.cur.tap{filter:brightness(1.4)}

const b = document.getElementById('scrB');
const cur = document.getElementById('cur');
function wait(ms) { return new Promise((r) => setTimeout(r, ms)); }
function moveTo(x, y, ms) {
  cur.style.transition = 'left ' + ms + 'ms ease, top ' + ms + 'ms ease';
  cur.style.left = x + '%';
  cur.style.top = y + '%';
  return wait(ms);
}
async function tap() {
  cur.classList.add('tap');
  await wait(150);
  cur.classList.remove('tap');
}
async function loop() {
  for (;;) {
    b.style.transform = 'translateX(100%)';
    cur.style.transition = 'none';
    cur.style.left = '10%';
    cur.style.top = '90%';
    await wait(500);
    await moveTo(50, 40, 700);
    await tap();
    b.style.transform = 'translateX(0)';
    await wait(1300);
    await moveTo(13, 16, 600);
    await tap();
    b.style.transform = 'translateX(100%)';
    await wait(1200);
  }
}
loop();