Motion

OpenClaw uses a three-step duration scale with purpose-matched easing functions. Every animation should serve a functional goal — transitions that exist only for aesthetics add cognitive load without benefit.

Duration Scale

Defined in ui/src/styles/base.css:

Non-token durations in use (document when adding new ones):

Easing Functions

Defined in ui/src/styles/base.css:

Default rule of thumb: Use --ease-out unless the element explicitly moves from point A to point B (use --ease-in-out) or needs a bouncy feel (use --ease-spring).

prefers-reduced-motion Pattern

Every animation or transition must be suppressed when the user has requested reduced motion. Use the global reset already present in base.css — do not add per-component overrides unless you need to preserve a non-animated state change (e.g. instant opacity change is acceptable, instant position snap is acceptable).

/* Already in base.css — covers all transitions globally */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

For components with complex animation state (e.g. shimmer skeletons that use animation-iteration-count: infinite), add an explicit guard:

@media (prefers-reduced-motion: reduce) {
  .my-shimmer {
    animation: none;
    /* Show a static placeholder instead */
    opacity: 0.5;
  }
}

Animation Inventory

Anti-Patterns

• ❌ Adding new keyframe animations without a prefers-reduced-motion suppression
• ❌ Using animation-iteration-count: infinite outside of skeleton loaders
• ❌ Duration > 500ms for UI chrome elements (feels sluggish)
• ❌ linear easing for enter/exit — always use a curve from the token set
• ❌ CSS transitions on transform and opacity simultaneously with filter — causes GPU layer explosion on mobile