Design Atlas
한국어
↝ Motion

Moving hold

무빙 홀드

A hold that keeps the pose but never goes fully static — a tiny continuous drift, like breathing, because a truly frozen frame reads as dead rather than paused.

Also known as: Moving hold (animation)Living hold
···
html
<div class="split">
  <div class="panel">
    <span class="tag">Static hold</span>
    <i class="char still"></i>
    <div class="wave"><i></i><i></i><i></i><i></i><i></i></div>
  </div>
  <div class="panel">
    <span class="tag">Moving hold</span>
    <i class="char breathing"></i>
    <div class="wave live"><i></i><i></i><i></i><i></i><i></i></div>
  </div>
</div>
css
.split{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3%}
.panel{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%}
.tag{position:absolute;top:6%;left:0;right:0;text-align:center;font:700 10px/1 ui-monospace,monospace;color:var(--muted)}
.char{width:26%;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.breathing{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05,.95)}}
.wave{display:flex;gap:6%;width:56%;height:14%}
.wave i{flex:1;background:var(--muted);border-radius:2px;align-self:center;height:20%}
.live i{animation:bob 1.6s ease-in-out infinite}
.live i:nth-child(1){animation-delay:0s}
.live i:nth-child(2){animation-delay:.12s}
.live i:nth-child(3){animation-delay:.24s}
.live i:nth-child(4){animation-delay:.36s}
.live i:nth-child(5){animation-delay:.48s}
@keyframes bob{0%,100%{height:20%}50%{height:90%}}

A living thing never truly stops moving even while holding still — it breathes, its weight shifts by a fraction, its eyes blink. Freeze every value completely during a hold (a static hold) and a character can read as dead rather than paused, so animators instead keep the big pose locked while letting a small secondary motion drift continuously underneath it — a moving hold.

In UI, an idle avatar that scales by a fraction of a percent like breathing, or blinks once in a while, reads as noticeably more "alive" than one that's perfectly still — even though nothing in its actual state has changed.

The "static hold" on the left is a perfectly fixed circle, and the waveform under it stays flat. The "moving hold" on the right is the same circle, breathing subtly larger and smaller, with the waveform beneath it gently rippling in sync.

When to use

Use it for idle avatars, mascots, and characters. Buttons and icons that are supposed to read as stable and inert usually don't need it.