Reverse

리버스

Playing captured frames in reverse order makes recorded motion appear to run backward.

Also known as: Reverse playbackReversed footage
···
html
<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>
css
.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}}

Like a dropped object returning to a hand, reverse playback shows a recorded action in the opposite order. Familiar motion flows the wrong way and feels unexpected.

Reverse the clip’s playback direction in the editor, or reverse the order of its frames. The demo rewinds a ball’s recorded arc from right to left after it originally traveled left to right.

Reverse does not invent a new action; it plays the movement captured in the source backward. The subject and its surroundings all reverse together, so choose source motion that still reads clearly in reverse.

When to use

Use it when reversing a recorded action creates a useful surprise, such as an object returning or scattered pieces coming together. Choose footage whose surrounding motion can also run backward convincingly.

Open as page ↗

Suggest an entry

Tell us about a film term or effect that’s missing. We review each suggestion.