J-cut

<div class="stage j-demo">
  <div class="monitor">
    <div class="shot hall"><i class="door"></i><i class="lamp"></i><span>SHOT A · HALL</span></div>
    <div class="shot room"><i class="window"></i><i class="lamp"></i><span>SHOT B · ROOM</span></div>
    <div class="cue">B AUDIO ARRIVES FIRST</div>
  </div>
  <div class="timeline">
    <div class="track-row"><b>PICTURE</b><div class="lane"><i class="clip video-a">A · HALL</i><i class="clip video-b">B · ROOM</i><i class="cut"></i><i class="playhead"></i></div></div>
    <div class="track-row"><b>AUDIO A</b><div class="lane"><i class="clip sound-a waveform">VOICE</i><i class="cut"></i><i class="playhead"></i></div></div>
    <div class="track-row"><b>AUDIO B</b><div class="lane"><i class="clip sound-b waveform">ROOM TONE</i><i class="cut"></i><i class="playhead"></i></div></div>
    <div class="note"><i></i> NEXT SOUND LEADS THE PICTURE CUT</div>
  </div>
</div>

.j-demo{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.monitor{position:absolute;inset:5% 6% 55%;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.shot{position:absolute;inset:0;overflow:hidden;padding:8px;color:#fff;font:700 clamp(8px,1vw,12px) ui-monospace,monospace;letter-spacing:.08em}
.hall{background:linear-gradient(118deg,#233b39 0 27%,#52665c 27% 50%,#192a2a 50%);animation:hall-shot 4s steps(1,end) infinite}
.room{background:linear-gradient(145deg,#a86b42,#513c3a 64%,#263d46);opacity:0;animation:room-shot 4s steps(1,end) infinite}
.door{position:absolute;right:18%;bottom:0;width:22%;height:80%;border:1px solid #ffffff8c;border-bottom:0;background:linear-gradient(90deg,#172523,#8b7359 75%,#172523)}
.window{position:absolute;right:16%;top:14%;width:24%;height:54%;border:1px solid #ffffffad;background:linear-gradient(145deg,#d7bd8b,#799698)}
.lamp{position:absolute;left:23%;top:25%;width:13%;aspect-ratio:1;border-radius:50%;background:#f7d891;box-shadow:0 0 0 8px #f7d89122}
.shot span{position:absolute;left:10px;bottom:8px;text-shadow:0 1px 4px #000}
.cue{position:absolute;right:8px;top:8px;padding:4px 6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:700 clamp(7px,.9vw,11px) ui-monospace,monospace;letter-spacing:.06em;opacity:0;animation:cue 4s linear infinite}
.timeline{position:absolute;left:6%;right:6%;top:49%;bottom:6%;display:grid;grid-template-rows:repeat(3,minmax(0,1fr)) auto;gap:4px}
.track-row{display:grid;grid-template-columns:clamp(50px,8vw,96px) 1fr;gap:6px;align-items:stretch;min-height:0}
.track-row>b{display:flex;align-items:center;color:var(--muted);font:700 clamp(7px,1vw,11px) ui-monospace,monospace;letter-spacing:.07em}
.lane{position:relative;overflow:visible;min-width:0;border-bottom:1px solid var(--line)}
.clip{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;padding:0 5px;white-space:nowrap;color:var(--fg);font:700 clamp(7px,1vw,12px) ui-monospace,monospace;letter-spacing:.025em}
.video-a{left:0;width:54%;border:1px solid var(--line);background:var(--surface)}
.video-b{left:54%;width:46%;border:1px solid var(--line);background:var(--surface)}
.sound-a{left:0;width:54%;border:1px solid var(--accent-2);background:var(--surface)}
.sound-b{left:31%;width:69%;border:1px solid var(--accent);background:var(--surface)}
.waveform:after{content:"";position:absolute;inset:27% 4px;background:repeating-linear-gradient(90deg,transparent 0 4px,currentColor 4px 5px,transparent 5px 8px);opacity:.34;pointer-events:none}
.sound-a:after{color:var(--accent-2)}.sound-b:after{color:var(--accent)}
.cut{position:absolute;z-index:2;left:54%;top:-2px;bottom:-2px;width:1px;background:var(--fg);opacity:.72}
.playhead{position:absolute;z-index:3;top:-3px;bottom:-3px;left:0;width:2px;background:var(--accent);animation:playhead 4s linear infinite}
.note{display:flex;align-items:center;gap:6px;color:var(--muted);font:700 clamp(7px,1vw,11px) ui-monospace,monospace;letter-spacing:.05em}
.note i{width:7px;aspect-ratio:1;border-radius:50%;background:var(--accent);animation:blink 4s linear infinite}
@keyframes hall-shot{0%,53.9%{opacity:1}54%,100%{opacity:0}}
@keyframes room-shot{0%,53.9%{opacity:0}54%,100%{opacity:1}}
@keyframes cue{0%,28%{opacity:0}32%,54%{opacity:1}61%,100%{opacity:0}}
@keyframes playhead{from{left:0}to{left:100%}}
@keyframes blink{0%,30%,62%,100%{opacity:.35}38%,53%{opacity:1}}