Design Atlas
한국어
▶ Motion graphics

Motion blur

모션 블러

The streaked blur a fast-moving object leaves while a camera's shutter stays open. Editors add this blur artificially so digital motion reads as smooth rather than stroboscopic.

Also known as: Shutter angle blurDirectional blur
···
html
<div class="stage">
  <div class="lane"><span class="tag">모션 블러 없음</span><div class="track"><i class="ball hard"></i></div></div>
  <div class="lane"><span class="tag">모션 블러</span><div class="track">
    <i class="trail t1"></i><i class="trail t2"></i><i class="trail t3"></i><i class="ball soft"></i>
  </div></div>
</div>
css
.stage{position:absolute;inset:10% 8%;display:flex;flex-direction:column;justify-content:space-around}
.lane{position:relative}
.tag{display:block;margin-bottom:8px;font:11px/1 ui-monospace,monospace;color:var(--muted)}
.track{position:relative;height:clamp(22px,9vmin,40px)}
.ball,.trail{position:absolute;top:0;width:clamp(20px,8vmin,36px);height:clamp(20px,8vmin,36px);border-radius:50%;background:var(--accent)}
.hard{animation:run-steps 2.4s steps(8) infinite}
.soft{animation:run-smooth 2.4s linear infinite}
.trail{filter:blur(6px);animation:run-smooth 2.4s linear infinite}
.t1{opacity:.35;animation-delay:.045s}
.t2{opacity:.2;animation-delay:.09s}
.t3{opacity:.1;animation-delay:.135s}
@keyframes run-steps{0%{left:0}100%{left:calc(100% - clamp(20px,8vmin,36px))}}
@keyframes run-smooth{0%{left:0}100%{left:calc(100% - clamp(20px,8vmin,36px))}}

Digital animation has no information between frames, so fast motion looks choppy ("strobing"). A real camera's shutter stays open for a slice of time (the shutter angle — 180° is a common default, meaning exposure covers half a frame), so it keeps gathering light and leaves a natural trail.

After Effects toggles motion blur per layer and controls the amount with shutter angle and shutter phase. Premiere Pro fakes something similar through transition options. Too much reads as chaotic; too little still looks stuttery.

Never apply motion blur to static screen elements like captions or UI overlays — legibility collapses. Reserve it for shots where the camera or the object is actually moving fast.

When to use

Start from the 180° shutter-angle default and only push it higher for genuinely fast action.