디폴트 효과

<div class="stage">
  <div class="pane"><div class="tag">A · opt-in</div>
    <div class="list" id="la"></div>
  </div>
  <div class="pane"><div class="tag">B · opt-out</div>
    <div class="list on" id="lb"></div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.list{display:flex;gap:8px}
.list span{width:20px;height:20px;border-radius:5px;border:2px solid var(--line);background:var(--bg);position:relative}
.list.on span{background:var(--accent);border-color:var(--accent)}
.list span.flip{animation:flip 3s ease-in-out infinite}
.list.on span.flip{animation:flipOn 3s ease-in-out infinite}
@keyframes flip{0%,60%{background:var(--bg);border-color:var(--line)}75%,100%{background:var(--accent);border-color:var(--accent)}}
@keyframes flipOn{0%,60%{background:var(--accent);border-color:var(--accent)}75%,100%{background:var(--bg);border-color:var(--line)}}

const la = document.getElementById('la'), lb = document.getElementById('lb');
for (let i = 0; i < 5; i++) {
  const a = document.createElement('span'); if (i === 1) a.className = 'flip'; la.appendChild(a);
  const b = document.createElement('span'); if (i === 3) b.className = 'flip'; lb.appendChild(b);
}