스플릿 스크린

<div class="split" id="split">
  <div class="pane left"><i class="ic"></i><i class="ln"></i><i class="ln s"></i></div>
  <div class="pane right"><i class="ln"></i><i class="ln s"></i><i class="btn"></i></div>
</div>

.split{display:flex;width:min(94%,560px);height:min(88%,260px);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.pane{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:8%;
  transition:flex-grow .8s cubic-bezier(.2,.8,.2,1)}
.left{background:var(--accent);flex-grow:1}
.right{background:var(--surface);flex-grow:1}
.left .ic{width:22%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.85)}
.left .ln{height:8px;border-radius:3px;background:rgba(255,255,255,.7);width:70%}
.left .ln.s{width:45%}
.right .ln{height:8px;border-radius:3px;background:var(--line);width:80%}
.right .ln.s{width:55%}
.right .btn{margin-top:6px;width:46%;height:22px;border-radius:6px;background:var(--accent-3)}

const split = document.getElementById('split');
const left = split.querySelector('.left');
const right = split.querySelector('.right');
let toggled = false;
setInterval(() => {
  toggled = !toggled;
  left.style.flexGrow = toggled ? '1.5' : '1';
  right.style.flexGrow = toggled ? '0.7' : '1';
}, 1800);