레드라인

<div class="stage">
  <div class="a" id="a"></div>
  <div class="gap" id="gap"><div class="line"></div><span id="gapv">24</span></div>
  <div class="b" id="b"></div>
  <div class="wtag" id="wtag"><div class="line h"></div><span>120</span></div>
</div>

.stage{position:relative;width:94%;height:80%;display:flex;align-items:center;gap:0}
.a{width:28%;height:70%;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.b{width:28%;height:70%;border-radius:8px;background:var(--surface);border:1px solid var(--line);margin-left:8%}
.gap{position:relative;width:8%;height:70%;display:flex;align-items:center;justify-content:center}
.line{position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--accent-2);opacity:0;transition:opacity .4s}
.line.h{position:static;width:100%;height:1.5px;opacity:1}
.gap span{position:absolute;top:-18px;font:700 10px/1 monospace;color:var(--accent-2);opacity:0;transition:opacity .4s}
.gap.on .line,.gap.on span{opacity:1}
.wtag{position:absolute;left:6%;bottom:4%;width:28%;display:flex;flex-direction:column;align-items:center;gap:2px;opacity:0;transition:opacity .4s}
.wtag span{font:700 10px/1 monospace;color:var(--accent-2)}
.wtag.on{opacity:1}

const gap = document.getElementById('gap');
const wtag = document.getElementById('wtag');
let on = false;
function toggle() {
  on = !on;
  gap.classList.toggle('on', on);
  wtag.classList.toggle('on', on);
}
setInterval(toggle, 1300);