Design Atlas
한국어
↝ Motion

Smear frame

스미어 프레임

A traditional-animation trick for motion too fast to render frame-by-frame: draw the single fastest instant as a stretched, multi-image blur instead.

Also known as: SmearMultiple (animation)Stretch frame
···
html
<div class="rows">
  <div class="row">
    <span class="tag">No smear</span>
    <div class="track"><i class="ball plain"></i></div>
  </div>
  <div class="row">
    <span class="tag">Smear frame</span>
    <div class="track"><i class="ball smear"></i></div>
  </div>
</div>
css
.rows{position:absolute;inset:14% 6%;display:flex;flex-direction:column;justify-content:space-around}
.row{display:flex;flex-direction:column;gap:8px}
.tag{font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.track{position:relative;height:24px}
.track::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;background:var(--line)}
.ball{position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--accent)}
.plain{animation:swing 1.6s ease-in-out infinite}
.smear{background:var(--accent-2);animation:swing 1.6s ease-in-out infinite, stretch 1.6s ease-in-out infinite}
@keyframes swing{
  0%{left:6%}
  25%{left:calc(50% - 11px)}
  50%{left:calc(94% - 22px)}
  75%{left:calc(50% - 11px)}
  100%{left:6%}
}
@keyframes stretch{
  0%,50%,100%{transform:scaleX(1) scaleY(1)}
  12.5%,87.5%{transform:scaleX(2.2) scaleY(.55)}
  37.5%,62.5%{transform:scaleX(2.2) scaleY(.55)}
}

Before live-action cameras could bake in motion blur, animators drew the one or two frames at the peak of a very fast swing — an arm whip, a head turn — as a stretched shape or several overlapping copies of the limb. Frozen as a single frame it looks like a mistake; at playback speed, the brain reads it as "that moved very fast." Classic Looney Tunes limbs momentarily reading as spokes on a wheel are a textbook example.

Real-time motion blur exists now, but the smear frame survives as a cheap, stylish alternative in 2D animation and cartoon-styled games.

In UI, the same idea lives on as a cheap directional-blur substitute — an icon or card briefly stretching sideways during a very fast scroll or swipe.

The ball on top swings back and forth with no smear — it stays perfectly round even at top speed, which reads slightly stiff. The ball below makes the same swing, but stretches sideways at the fastest instant of each pass and snaps back to round — it reads as noticeably faster and smoother.

When to use

Use it in cartoon-styled UI or games where real motion blur is too expensive to render, and only for a single, very brief instant — leave it on screen too long and it just looks broken.