Design Atlas
한국어
▶ Motion graphics

Stop motion

스톱모션

Animation made by nudging a physical object a tiny bit and photographing one frame at a time — the slight, uneven jitter of handmade imperfection is part of the look.

Also known as: ClaymationStop-frame animation
···
html
<div class="stage">
  <div class="desk"></div>
  <div class="shadow"></div>
  <div class="clay" id="clay"></div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden}
.desk{position:absolute;inset:0;background:
  linear-gradient(180deg,var(--surface) 0 62%,var(--line) 62% 64%,var(--bg) 64% 100%)}
.shadow{position:absolute;left:50%;bottom:24%;width:clamp(50px,19vmin,92px);height:10px;margin-left:calc(clamp(50px,19vmin,92px) / -2);
  border-radius:50%;background:var(--muted);opacity:.25;filter:blur(3px)}
.clay{position:absolute;left:50%;bottom:27%;width:clamp(54px,20vmin,100px);height:clamp(54px,20vmin,100px);margin-left:calc(clamp(54px,20vmin,100px) / -2);
  border-radius:46% 54% 50% 50% / 55% 50% 50% 45%;background:var(--accent-2);box-shadow:0 6px 14px rgba(0,0,0,.18)}
js
const clay = document.getElementById('clay');
let frame = 0;
function jitter() {
  frame++;
  const t = frame * 0.5;
  const x = Math.sin(t) * 26 + (Math.random() - 0.5) * 3;
  const y = -Math.abs(Math.sin(t * 1.3)) * 14 + (Math.random() - 0.5) * 2;
  const rot = Math.sin(t * 0.8) * 8 + (Math.random() - 0.5) * 4;
  const squash = 1 + Math.abs(Math.sin(t * 1.3)) * 0.18;
  clay.style.transform = 'translate(' + x + 'px,' + y + 'px) rotate(' + rot + 'deg) scale(' + (2 - squash) + ',' + squash + ')';
}
jitter();
setInterval(jitter, 140);

Clay, puppets, paper cutouts, even ordinary household objects can all be the subject. The process is: shoot one frame, nudge the object a few millimeters, shoot again — repeated enough times to fill a second of footage, usually 12 to 24 frames.

The key difference from digital animation is that a perfect repeat is physically impossible. A human hand moves the object slightly differently every time, and lighting or shadows drift a hair each frame too — that imperfection is exactly what gives stop motion its distinctive handmade feel. Studios like Laika (Coraline) and Aardman (Wallace & Gromit) are famous for controlling that wobble with extreme precision rather than eliminating it.

When digital animation wants to fake the stop-motion "feel," it adds a tiny random position offset to every frame to reproduce that same jitter.

When to use

Don't try to eliminate the jitter entirely — smooth it out too much and you lose the exact texture that makes stop motion recognizable.