샷 사이즈

<div class="stage">
  <svg class="fig" viewBox="0 0 100 200" preserveAspectRatio="xMidYMax meet">
    <circle cx="50" cy="26" r="16" fill="#caa27a"/>
    <path d="M50,42 C28,46 20,80 22,140 L30,196 L44,196 L46,120 L54,120 L56,196 L70,196 L78,140 C80,80 72,46 50,42 Z" fill="#3a4a63"/>
  </svg>
  <div class="win" id="win">
    <i class="c tl"></i><i class="c tr"></i><i class="c bl"></i><i class="c br"></i>
  </div>
  <span class="lbl" id="lbl">WS</span>
</div>

.stage{position:absolute;inset:0;background:#0c0c12;overflow:hidden}
.fig{position:absolute;left:50%;bottom:0;height:100%;width:auto;transform:translateX(-50%)}
.win{position:absolute;border:2px solid #fff;box-shadow:0 0 0 2000px rgba(0,0,0,.72);
  transition:all 1s cubic-bezier(.4,0,.2,1)}
.win .c{position:absolute;width:9px;height:9px;border-color:#fff;border-style:solid}
.tl{left:-2px;top:-2px;border-width:2px 0 0 2px}
.tr{right:-2px;top:-2px;border-width:2px 2px 0 0}
.bl{left:-2px;bottom:-2px;border-width:0 0 2px 2px}
.br{right:-2px;bottom:-2px;border-width:0 2px 2px 0}
.lbl{position:absolute;left:6%;bottom:5%;font:800 13px ui-monospace,monospace;color:#fff;
  background:rgba(255,255,255,.14);padding:3px 9px;border-radius:20px;letter-spacing:.04em}

const win=document.getElementById('win');
const lbl=document.getElementById('lbl');
const states=[
  { name:'WS', top:'2%', left:'22%', w:'56%', h:'96%' },
  { name:'MS', top:'20%', left:'30%', w:'40%', h:'62%' },
  { name:'CU', top:'2%', left:'33%', w:'34%', h:'34%' },
  { name:'ECU', top:'6%', left:'42%', w:'16%', h:'14%' },
];
let i=0;
function step(){
  const s=states[i];
  win.style.top=s.top; win.style.left=s.left; win.style.width=s.w; win.style.height=s.h;
  lbl.textContent=s.name;
  i=(i+1)%states.length;
}
step();
setInterval(step,1600);