Motion tokens

Motion tokens coordinate how prominent interface surfaces enter, leave, and settle. Duration controls how long a transition takes; easing controls how velocity changes across that time. They describe timing, never whether an interaction is accessible or complete.

Hover or focus to preview

Moderate duration · Standard easing

Instant duration

--aidsgn-duration-instant · 0ms

Fast duration

--aidsgn-duration-fast · 120ms

Standard duration

--aidsgn-duration-standard · 180ms

Moderate duration

--aidsgn-duration-moderate · 220ms

Slow duration

--aidsgn-duration-slow · 320ms

Linear easing

--aidsgn-easing-linear · cubic-bezier(0, 0, 1, 1)

Standard easing

--aidsgn-easing-standard · cubic-bezier(0.2, 0, 0, 1)

Enter easing

--aidsgn-easing-enter · cubic-bezier(0, 0, 0, 1)

Exit easing

--aidsgn-easing-exit · cubic-bezier(0.4, 0, 1, 1)

Emphasized easing

--aidsgn-easing-emphasized · cubic-bezier(0.34, 1.56, 0.64, 1)

Choose any duration and easing above to replay the same movement with those tokens. Hover or focus the preview to run the selected combination again.

The duration scale runs from an immediate instant state change through slow large-distance movement. Easing roles distinguish constant progress, standard movement, entrances, exits, and brief emphasized feedback. Choose the smallest suitable duration and an easing that matches the movement’s purpose.

Modal components consume the moderate and standard primitives through --aidsgn-modal-motion-duration and --aidsgn-modal-motion-easing, keeping the backdrop and surface synchronized.

Use motion sparingly and make state clear before, during, and after a transition. Non-essential motion must honor prefers-reduced-motion; removing animation must not delay state changes or hide content.

.surface {
  transition: transform var(--aidsgn-duration-moderate) var(--aidsgn-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  .surface {
    transition-duration: 0ms;
  }
}