Chapter

Motion Language

Motion that explains state without competing with content.

Introduction

In Layered Interface Method, animation is a sentence about change. Users should understand what happened, where focus moved, and whether an action completed — without needing spectacle.

Core question

If the interface is unclear without motion, fix structure first. Motion amplifies clarity; it cannot replace it.

Theory

People perceive continuity, hierarchy, and cause. Effective motion protects those cues:

  • Why: motion reduces cognitive jumps between states.
  • When: use it for state changes, spatial relationships, and feedback.
  • When not: decoration, endless loops, or motion that blocks reading.
  • Typical mistakes: animating everything, long durations, bounce in serious tools.
  • UX impact: calm motion increases trust; noisy motion reduces perceived quality.

Interactive motion labs live in lab/motion-playground/. This Runtime chapter keeps theory and guidelines; live demos open from Lab.

Duration

Duration is the most misunderstood token. Too fast feels like a glitch; too slow feels like waiting. LIM keeps most interface feedback between 160–350ms.

Why

Time must match the size of the change. Tiny toggles need short confirmation; large panels may need slightly longer travel.

When not

Do not use 1000ms for hover or checkbox states. Long durations invent weight that the UI does not have.

Distance

Travel distance should stay proportional. Entrances of 12–20px feel present; 48px+ often feels theatrical unless the layout truly shifts.

Hierarchy

Only the primary change should lead. Supporting elements may follow with a short stagger, but never compete for attention.

  • Primary action resolves first.
  • Secondary content may fade later by 40–80ms.
  • Background chrome stays still.

Attention

Attention is a scarce resource. Chaotic motion trains users to ignore movement. Composed motion points to meaning.

Shared Elements

When an object continues across views, keep its identity. Hard cuts force the brain to re-find the subject.

Push vs Overlay

Overlay preserves context. Push rearranges the primary surface. Choose based on whether comparison between layers matters.

Motion Curves

Easing is character. LIM Standard settles quickly; LIM Emphasized is reserved for meaningful entrances. Avoid bounce in product-critical flows.

Arc Motion

Straight lines can feel like teleportation. Soft arcs suggest continuity without cartoon physics.

Physics

Deceleration is welcome. Overshoot is not the default. LIM prefers emphasized easing over spring bounce for serious interfaces.

Motion Tokens

TokenValueRole
--duration-fast160msHover, focus, compact controls
--duration-medium320msTheme, panel, color shifts
--duration-slow560msReveal, large spatial changes
--ease-standardcubic-bezier(0.2, 0.8, 0.2, 1)Default interface motion
--ease-emphasizedcubic-bezier(0.22, 1, 0.36, 1)Meaningful entrances

Guidelines

Use when

  • State actually changes and users need orientation.
  • A spatial relationship must remain continuous.
  • Feedback confirms a completed action.

Avoid when

  • Content is still being read and motion steals focus.
  • The same element animates on every trivial hover.
  • Motion is required to understand critical meaning.
Do not

Bounce, infinite rotation, chaotic 3D tilt, per-paragraph animation, neon glow pulses.

Motion Checklist

  • Motion explains a state change
  • Content remains usable without JavaScript
  • prefers-reduced-motion removes travel and parallax
  • No permanent layout thrash
  • Hover is never the only cue
  • One primary motion leads the scene