시그니파이어

<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="door" id="d1"></div>
    <div class="cur" id="c1">➤</div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="door" id="d2"><span class="arrow"></span></div>
    <div class="cur" id="c2">➤</div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.door{position:relative;width:46%;height:66%;border-radius:6px;background:linear-gradient(180deg,var(--bg),var(--line));border:2px solid var(--line);transform-origin:left center}
.arrow{position:absolute;right:14%;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--accent)}
#d1{animation:shake 2.6s ease-in-out infinite}
@keyframes shake{0%,50%{transform:rotate(0)}56%,64%,72%{transform:rotate(2deg)}60%,68%{transform:rotate(-2deg)}80%,100%{transform:rotate(0)}}
#d2{animation:swing 2.6s ease-in-out infinite}
@keyframes swing{0%,55%{transform:perspective(400px) rotateY(0)}80%,100%{transform:perspective(400px) rotateY(-55deg)}}
.cur{position:absolute;font-size:15px;transform:rotate(-45deg);color:var(--fg)}
#c1{animation:pull 2.6s ease-in-out infinite}
#c2{animation:push 2.6s ease-in-out infinite}
@keyframes pull{0%{left:20%;top:75%}50%{left:64%;top:48%}65%{left:56%;top:48%}100%{left:56%;top:48%}}
@keyframes push{0%{left:20%;top:75%}55%{left:68%;top:48%}80%{left:78%;top:48%}100%{left:78%;top:48%}}