180도 법칙

<div class="stage">
  <div class="top">
    <div class="axis"></div>
    <div class="char ca">A</div>
    <div class="char cb">B</div>
    <div class="cam" id="cam"></div>
    <span class="warn" id="warn">LINE CROSSED</span>
  </div>
  <div class="frames">
    <div class="frame"><i class="p left" id="f1l">A</i><i class="p right" id="f1r">B</i></div>
    <div class="frame" id="f2"><i class="p left" id="f2l">A</i><i class="p right" id="f2r">B</i></div>
  </div>
</div>

.stage{position:absolute;inset:0;display:flex;gap:4%;padding:4%;box-sizing:border-box}
.top{position:relative;flex:1.3;background:color-mix(in oklab,var(--accent) 6%,var(--surface));
  border-radius:8px;border:1px solid var(--line)}
.axis{position:absolute;left:20%;right:20%;top:50%;height:1px;
  background:repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 11px)}
.char{position:absolute;top:50%;width:13%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;font:800 11px system-ui,sans-serif;color:#fff}
.ca{left:20%;background:var(--accent)}
.cb{left:80%;background:var(--accent-2)}
.cam{position:absolute;width:6%;aspect-ratio:1;border-radius:2px;background:var(--fg);transform:translate(-50%,-50%)}
.warn{position:absolute;left:50%;top:3%;transform:translateX(-50%);font:800 10px ui-monospace,monospace;
  color:#ff4d5e;opacity:0;transition:opacity .3s;letter-spacing:.05em}
.warn.show{opacity:1}
.frames{flex:1;display:flex;flex-direction:column;gap:6%}
.frame{position:relative;flex:1;border-radius:6px;border:2px solid var(--line);background:var(--surface);
  transition:border-color .3s}
.frame.bad{border-color:#ff4d5e}
#f1l{left:12%}
#f1r{left:64%}
.p{position:absolute;top:50%;width:20%;aspect-ratio:1;border-radius:50%;transform:translateY(-50%);
  transition:left .5s ease;display:grid;place-items:center;color:#fff;font:800 10px system-ui,sans-serif}
.p.left{background:var(--accent)}
.p.right{background:var(--accent-2)}

const cam=document.getElementById('cam');
const f2=document.getElementById('f2');
const f2l=document.getElementById('f2l'), f2r=document.getElementById('f2r');
const warn=document.getElementById('warn');
function frame(t){
  const cycle=6000;
  const phase=(t%cycle)/cycle;
  const crossed=phase>0.72 && phase<0.92;
  const side=crossed?-1:1;
  const ang=phase*Math.PI*2*2.4;
  const localAngle=Math.PI*0.22+(Math.sin(ang)*0.5+0.5)*Math.PI*0.56;
  const x=50+Math.cos(localAngle)*17;
  const y=50+side*Math.sin(localAngle)*15;
  cam.style.left=x+'%';
  cam.style.top=y+'%';
  const orderNormal=side>0;
  f2l.style.left=orderNormal?'12%':'64%';
  f2r.style.left=orderNormal?'64%':'12%';
  f2.classList.toggle('bad',!orderNormal);
  warn.classList.toggle('show',!orderNormal);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);