Freeze frame

<div class="frame">
  <div class="scene">
    <div class="track"></div>
    <div class="subject"><i></i></div>
    <div class="hold">FRAME HELD</div>
  </div>
  <div class="caption"><span>OUTPUT: ONE FRAME</span><b>TIMELINE: MOVING</b></div>
  <div class="timeline"><span>EDIT TIMELINE</span><div class="clip"><i></i><i></i><i></i><i></i><i></i></div><b class="playhead"></b></div>
</div>

.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg);padding:6% 7%}
.scene{position:absolute;left:7%;right:7%;top:8%;bottom:34%;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.track{position:absolute;left:7%;right:7%;top:59%;border-top:1px dashed var(--line)}
.subject{position:absolute;left:8%;top:40%;width:clamp(28px,9vmin,52px);aspect-ratio:1;border-radius:50%;background:var(--accent);animation:action 3.6s ease-in-out infinite}
.subject:after{content:"";position:absolute;left:18%;right:18%;bottom:-13%;height:12%;border-radius:50%;background:var(--fg);opacity:.18}
.subject i{position:absolute;inset:25%;border:1px solid var(--surface);border-radius:50%;opacity:.85}
.hold{position:absolute;right:5%;top:8%;padding:5px 7px;border:1px solid var(--accent);font:700 clamp(8px,1vw,12px) ui-monospace,monospace;letter-spacing:.1em;color:var(--accent);opacity:0;animation:hold 3.6s steps(1,end) infinite}
.caption{position:absolute;left:7%;right:7%;bottom:25%;display:flex;justify-content:space-between;gap:4%;font:700 clamp(8px,1vw,12px) ui-monospace,monospace;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.caption b{color:var(--fg)}
.timeline{position:absolute;left:7%;right:7%;bottom:8%;height:15%;border-top:1px solid var(--line);display:flex;align-items:center;gap:4%;font:700 clamp(8px,1vw,12px) ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.clip{position:relative;flex:1;height:45%;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-around;overflow:hidden}
.clip i{width:7%;height:55%;background:var(--accent);opacity:.25}
.playhead{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);animation:play 3.6s linear infinite}
@keyframes action{0%,12%{left:8%;transform:rotate(0)}28%{left:43%;transform:rotate(35deg)}28.1%,72%{left:43%;transform:rotate(35deg)}88%{left:77%;transform:rotate(110deg)}100%{left:8%;transform:rotate(180deg)}}
@keyframes hold{0%,27.9%,72.1%,100%{opacity:0}28%,72%{opacity:1}}
@keyframes play{from{left:0}to{left:100%}}