핸드오프

<div class="stage">
  <div class="mock">
    <div class="box"></div>
    <button class="btn">Save</button>
  </div>
  <div class="ann a1" id="a1">16px</div>
  <div class="ann a2" id="a2">#5B5BF7</div>
  <div class="ann a3" id="a3">Inter 600 14px</div>
  <div class="ann a4" id="a4">radius 10</div>
</div>

.stage{position:relative;width:94%;height:88%}
.mock{position:absolute;left:10%;top:14%;width:60%;height:60%;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);padding:16px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
.box{flex:1;border-radius:8px;background:var(--line)}
.btn{align-self:flex-start;border:none;border-radius:10px;background:var(--accent);color:#fff;
  padding:8px 16px;font:600 14px/1 sans-serif}
.ann{position:absolute;background:var(--fg);color:var(--bg);font:700 10px/1 monospace;padding:4px 7px;
  border-radius:5px;opacity:0;transition:opacity .35s}
.ann.on{opacity:1}
.a1{left:4%;top:12%}
.a2{left:74%;top:60%}
.a3{left:74%;top:74%}
.a4{left:74%;top:40%}

const anns = ['a1', 'a2', 'a3', 'a4'].map((id) => document.getElementById(id));
let i = 0;
function step() {
  anns.forEach((a, k) => a.classList.toggle('on', k <= i));
  i = (i + 1) % (anns.length + 2);
}
setInterval(step, 650);