Design Atlas
한국어
▶ Motion graphics

Speed ramp

스피드 램프

Ramping a single clip's playback speed dramatically — from slow motion to full speed or back — to build rhythm and emphasis within one shot.

Also known as: Time rampRamping
···
html
<div class="stage">
  <svg class="curve" viewBox="0 0 100 40" preserveAspectRatio="none">
    <polyline points="0,32 20,30 30,8 55,6 65,32 85,30 100,10" />
  </svg>
  <div class="track"><i class="dot"></i></div>
</div>
css
.stage{position:absolute;inset:14% 8%;display:grid;grid-template-rows:1fr auto;gap:16px}
.curve{display:block;width:100%;height:100%;min-height:0;overflow:visible}
.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)}
.dot{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--accent-2);
  animation:dot-move 4s linear infinite}
@keyframes dot-move{0%{left:0%}20%{left:6%}30%{left:16%}55%{left:74%}65%{left:79%}85%{left:86%}100%{left:calc(100% - 14px)}}

Editors set different speeds per segment with Premiere Pro's time remapping or clip-speed keyframes — often slowing right before the impact of an action and snapping back to speed at the moment of impact.

Because pitch shifts along with a sudden speed change, "Maintain Pitch" is usually switched on to keep voices from warping, and Optical Flow interpolation fills in frames so the ramp doesn't stutter.

Overuse makes a video feel gimmicky. Save it for one or two moments right before a climax, as a signal that says "pay attention now."

When to use

The length of the ramp itself is part of the rhythm — stretch it too long and tension turns into boredom.