피츠의 법칙

<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="target sm" id="t1"></div>
    <div class="cur" id="c1">➤</div>
    <div class="bar"><div class="fill f1"></div></div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="target lg" id="t2"></div>
    <div class="cur" id="c2">➤</div>
    <div class="bar"><div class="fill f2"></div></div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted);z-index:3}
.target{position:absolute;border-radius:50%;background:var(--accent-2)}
.sm{width:10%;height:14%;top:10%;right:8%}
.lg{width:34%;height:40%;top:16%;left:20%}
.cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg);left:8%;bottom:6%}
.bar{position:absolute;left:8%;right:8%;bottom:8%;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.fill{height:100%;background:var(--accent);width:0}
.f1{animation:grow 2.6s cubic-bezier(.3,0,.6,1) infinite}
.f2{animation:grow 1.1s cubic-bezier(.3,0,.6,1) infinite}
@keyframes grow{0%{width:0}70%{width:100%}100%{width:100%}}
#c1{animation:c1move 2.6s ease-in-out infinite}
#c2{animation:c2move 1.1s ease-out infinite}
@keyframes c1move{0%{left:8%;bottom:6%}30%{left:40%;bottom:60%}45%{left:55%;bottom:30%}70%{left:83%;bottom:74%}100%{left:83%;bottom:74%}}
@keyframes c2move{0%{left:8%;bottom:6%}70%{left:45%;bottom:44%}100%{left:45%;bottom:44%}}