타임 리맵

<div class="stage">
  <svg class="curve" viewBox="0 0 100 40" preserveAspectRatio="none">
    <line x1="0" y1="40" x2="100" y2="0" class="ghost"/>
    <polyline points="0,36 22,14 40,14 40,30 62,30 62,4 100,4" />
  </svg>
  <div class="track"><i class="box"></i></div>
  <div class="tags"><span>정상</span><span>정지</span><span>역재생</span><span>빠르게</span></div>
</div>

.stage{position:absolute;inset:12% 8%;display:grid;grid-template-rows:1fr auto auto;gap:10px}
.curve{display:block;width:100%;height:100%;min-height:0;overflow:visible}
.curve .ghost{stroke:var(--line);stroke-width:1;stroke-dasharray:2 2}
.curve polyline{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.track{position:relative;height:10px;border-radius:6px;background:var(--line)}
.box{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:4px;background:var(--accent-2);
  animation:remap-move 5s linear infinite}
@keyframes remap-move{
  0%{left:0%} 22%{left:22%} 40%{left:40%} 62%{left:22%} 62.001%{left:22%} 80%{left:60%} 100%{left:calc(100% - 16px)}
}
.tags{display:flex;justify-content:space-between;font:9px/1 ui-monospace,monospace;color:var(--muted)}