스톱모션

<div class="stage">
  <div class="desk"></div>
  <div class="shadow"></div>
  <div class="clay" id="clay"></div>
</div>

.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)}

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);