Motion Lexicon
中文
Interactive entry

Spatial consistency

Spatial consistency helps turn motion judgment into actionable design engineering rules.

Entrances & exitsSequencing & timingMovement & transformsState transitions
ready
Active entry

Preview, parameters, and exports

Spatial consistency helps turn motion judgment into actionable design engineering rules.

Animating so an element keeps its identity and position across states, so users never lose track of where things went

Browse categories
Preview
Spatial consistency
420ms
28px
0ms
soft
.motion-card {
  animation-name: motion-spatial-consistency;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0ms;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transform-origin: center;
}

@keyframes motion-spatial-consistency {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card {
    animation-name: motion-spatial-consistency-reduced;
    animation-duration: 180ms;
    animation-delay: 0ms;
    transform: none;
    animation-iteration-count: 1;
  }
}

@keyframes motion-spatial-consistency-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Agent prompt

Use Spatial consistency for a UI fragment: Spatial consistency helps turn motion judgment into actionable design engineering rules. Animate transform and opacity, keep the duration at 420ms, use 28px of visual amplitude, add a 0ms delay, use soft easing (cubic-bezier(0.23, 1, 0.32, 1)), and include a reduced-motion fallback.

intent: entrancefeel: softcontext: card
Usage
  • Use Spatial consistency while reviewing motion risk.
  • Align designers, engineers, or agents around implementation standards.
  • Turn abstract motion principles into executable checks.
Examples
  • Use Spatial consistency to evaluate whether a motion pattern affects comprehension, performance, or comfort.
  • Turn Spatial consistency into an explicit review criterion during critique.
Review notes
  • Use Spatial consistency as review language instead of relying on vague taste.
  • Check whether it serves orientation, feedback, continuity, performance, or comfort.
  • If it adds friction to high-frequency work, reduce or remove the related motion.
Reduced motion

Under reduced motion, the Spatial consistency page keeps the static diagram and text relationships.