Default to stillness

Motion has to explain something. Everything else stays still.

From vercel-design-md, "Motion and delight".

Flip one setting

Flip a switch. Count what else moves.

Everything animatesBad
stagger + bounce + toast + wiggle
Only the change movesGood
thumb 150ms + “Saved” fade
/* The switch moved, so the row confirms. Nothing else animates. */
.switch-thumb { transition: transform 150ms var(--ease); }
.saved { opacity: 0; }
.saved.on { animation: saved-fade 1.6s var(--ease); }

@keyframes saved-fade {
  0%, 100% { opacity: 0; }
  10%, 80% { opacity: 1; }
}

Why it matters, pros and cons

Why it matters

Motion earns its place when it explains a change or confirms an action.

Every extra moving element competes with the content for attention.

When little moves, the one thing that does is impossible to miss.

Pros

  • The user sees what their click changed, and nothing else.
  • Fewer animations to design, test and keep consistent.
  • Reduced-motion support comes almost for free.

Cons

  • A fully still UI can feel dead if nothing confirms an action.
  • Deciding what “explains something” is a judgement call.
  • Continuity, like list reorders, still needs real motion work.