동작을 실제보다 느리게 재생해 짧은 순간의 움직임을 또렷하게 보여 줍니다.
<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%)}}날아가는 공이나 손짓을 천천히 펼쳐 보이듯, 원래 짧았던 동작을 더 긴 시간에 보여 줍니다. 움직임의 모양과 순간 사이를 살펴볼 여유가 생깁니다.
느린 재생에 쓸 프레임이 충분하도록 촬영 단계에서 높은 프레임 레이트를 선택하세요. 편집에서 클립 속도를 낮추고, 필요하면 프레임 보간을 적용합니다. 데모는 120fps로 촬영한 동작을 30fps 재생으로 늦춰 보여 줍니다.
프레임을 적게 찍은 영상을 억지로 늘리면 같은 화면이 반복되거나 보간 흔적이 보여 끊길 수 있습니다. 타임랩스가 긴 시간을 압축하는 효과라면 슬로모션은 짧은 동작을 늘려 보여 줍니다.
빠른 손동작, 물체의 궤적, 표정 변화처럼 짧은 순간을 자세히 보여 주고 싶을 때 쓰세요. 부드러운 결과가 필요하면 촬영할 때 프레임을 충분히 확보하세요.