촬영한 프레임의 순서를 거꾸로 재생해 움직임이 반대 방향으로 진행되는 것처럼 보입니다.
<div class="frame">
<div class="heading"><span>SOURCE MOTION</span><b>→</b><span>REVERSE PLAYBACK</span><i>←</i></div>
<div class="scene">
<svg class="arc" viewBox="0 0 100 60" preserveAspectRatio="none" aria-hidden="true"><path d="M6 46 Q50 10 94 46"/></svg>
<div class="ball"></div>
<span class="start">START</span><span class="end">END</span>
</div>
<div class="caption"><span>RECORDED: LEFT → RIGHT</span><b>PLAYING: RIGHT → LEFT</b></div>
<div class="timeline"><span>FRAME ORDER</span><i class="marker"></i><b>REWIND</b></div>
</div>.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg);padding:6% 7%}
.heading{height:16%;display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.3vw,16px);font:700 clamp(9px,1.2vw,15px) ui-monospace,monospace;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.heading b,.heading i{font-style:normal;color:var(--accent)}
.scene{position:absolute;left:7%;right:7%;top:23%;bottom:28%;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.arc{position:absolute;left:4%;top:10%;width:92%;height:70%;overflow:visible}
.arc path{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:2 2}
.ball{position:absolute;left:86%;top:57%;width:clamp(22px,7vmin,42px);aspect-ratio:1;border-radius:50%;background:var(--accent);animation:rewind 3.6s linear infinite}
.start,.end{position:absolute;bottom:7%;font:700 clamp(8px,1vw,12px) ui-monospace,monospace;color:var(--muted)}
.start{left:5%}.end{right:5%}
.caption{position:absolute;left:7%;right:7%;bottom:19%;display:flex;justify-content:space-between;gap:3%;font:700 clamp(8px,1vw,12px) ui-monospace,monospace;letter-spacing:.035em;color:var(--muted);white-space:nowrap}
.caption b{color:var(--fg)}
.timeline{position:absolute;left:7%;right:7%;bottom:7%;height:2px;background:var(--line);font:700 clamp(8px,1vw,12px) ui-monospace,monospace;color:var(--muted)}
.timeline>span,.timeline>b{position:absolute;bottom:8px}.timeline>span{left:0}.timeline>b{right:0;color:var(--accent)}
.marker{position:absolute;top:-3px;width:2px;height:8px;background:var(--accent);animation:rewind-track 3.6s linear infinite}
@keyframes rewind{0%{left:86%;top:57%}50%{left:48%;top:9%}100%{left:8%;top:57%}}
@keyframes rewind-track{from{left:100%}to{left:0}}바닥에 떨어진 물건이 손으로 되돌아오듯, 촬영한 동작의 순서를 거꾸로 보여 줍니다. 익숙한 움직임이 반대로 흐르면서 낯선 느낌을 줍니다.
편집기에서 클립의 재생 방향을 반전하거나 프레임 순서를 뒤집습니다. 데모에서는 왼쪽에서 오른쪽으로 기록된 공의 포물선을 오른쪽에서 왼쪽으로 되감아 보여 줍니다.
리버스는 움직임을 새로 만드는 것이 아니라 원본에 기록된 동작을 거꾸로 재생합니다. 물체와 주변 환경의 움직임이 함께 반전되므로, 결과가 자연스럽게 읽힐 원본 동작을 골라야 합니다.
물체가 되돌아오거나 흩어진 것이 모이는 듯한 장면처럼, 원본 동작을 거꾸로 보면 재미있는 효과가 날 때 씁니다. 주변 움직임도 함께 역행해도 자연스러운 촬영본을 고르세요.