Slow motion

<div class="frame">
  <div class="heading"><span>CAPTURE <b>120 FPS</b></span><i>→</i><span>PLAY <b>30 FPS</b></span></div>
  <div class="scene">
    <div class="path"></div>
    <div class="flight"><i class="sample s1"></i><i class="sample s2"></i><i class="sample s3"></i><i class="sample s4"></i><b class="orb"></b></div>
    <span class="ratio">4× SLOW</span>
  </div>
  <div class="timeline"><span>CAPTURED FRAMES</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><b>PLAYBACK</b></div>
</div>

.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg);padding:6% 7%}
.heading{height:17%;display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vw,16px);font:700 clamp(10px,1.35vw,16px) ui-monospace,monospace;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.heading b{color:var(--fg)}.heading i{font-style:normal;color:var(--accent)}
.scene{position:absolute;left:7%;right:7%;top:24%;bottom:25%;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.path{position:absolute;left:7%;right:7%;top:54%;border-top:1px dashed var(--line)}
.flight{position:absolute;left:5%;top:39%;width:43%;height:34%;animation:travel 3.6s linear infinite}
.sample,.orb{position:absolute;top:50%;border-radius:50%;transform:translateY(-50%)}
.sample{width:clamp(9px,3vmin,17px);aspect-ratio:1;background:var(--accent);opacity:.18}
.s1{left:7%}.s2{left:28%;opacity:.3}.s3{left:49%;opacity:.45}.s4{left:70%;opacity:.62}
.orb{right:0;width:clamp(24px,8vmin,46px);aspect-ratio:1;background:var(--accent);box-shadow:0 0 0 5px var(--line)}
.ratio{position:absolute;right:5%;bottom:7%;font:700 clamp(9px,1.2vw,14px) ui-monospace,monospace;letter-spacing:.12em;color:var(--accent)}
.timeline{position:absolute;left:7%;right:7%;bottom:7%;height:11%;display:flex;align-items:center;justify-content:space-between;gap:2%;border-top:1px solid var(--line);font:700 clamp(8px,1vw,12px) ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.timeline>i{width:2px;height:36%;background:var(--line)}.timeline b{color:var(--fg)}
@keyframes travel{from{transform:translateX(0)}to{transform:translateX(115%)}}