Skip to content
Browse foundations

Foundation

Motion

Use motion to make cause, change, and result easier to understand. Product motion is punctual; Visual-expression motion reveals a meaningful system relationship.

01 / The decision

Choose motion by the job

Duration follows the amount of change a builder must understand. These four intervals are roles, not a menu of decorative speeds.

Fast

120ms

Hover, selection, and immediate acknowledgement.

Base

180ms

Disclosure, compact state changes, and direct feedback.

Slow

420ms

Panels, overlays, and transitions that preserve context.

Reveal

720ms

One purposeful narrative reveal or resolved system state.

02 / See it in use

Replay the operational patterns

Select a pattern, play it, pause it, or replay it. Reduced-motion mode shows the complete result immediately without depending on your global preference.

Interactive specimen · full motion

Connection details

Motion ready.

03 / How it works

Connect cause to result

Every transition must answer three questions: what initiated it, what relationship the movement clarifies, and what stable result remains.

Cause

A builder action or system event starts the change. Movement never begins without a reason.

Motion

Direction, duration, and easing preserve the object’s origin or communicate progress.

Result

The final state is explicit in text, structure, or stable iconography—not motion alone.

04 / Use / Avoid

Move once, with purpose

Use motion to orient

Preserve spatial relationships when a panel enters, a disclosure opens, or content changes level.

Avoid competing movement

Do not animate unrelated objects at the same time or keep drawing attention after the change is understood.

Use motion to confirm

Acknowledge direct actions quickly and leave a precise, readable final state.

Avoid status by motion

Loading, success, warning, and error always need persistent text or iconography.

Visual expression can reveal the system

Routes, nodes, and orbits may move when movement makes a real relationship legible. This four-second loop has controls, stops in static mode, and never animates the logo pieces independently.

System relationship · illustrative

The orbit shows a service relationship. Static mode preserves the nodes, route, and hierarchy.

05 / Adaptation

Reduced motion is a complete composition

Remove nonessential translation, scale, and continuous movement. Preserve hierarchy, status, labels, and the final relationship.

Full motion

State confirmed

A brief transition connects action to result.

Reduced motion

State confirmed

The same result appears immediately and completely.

Honor the preference

Use prefers-reduced-motion: reduce as the default boundary and provide a deliberate static result.

Keep controls available

Play, Pause, Replay, and static mode use visible text and remain keyboard operable.

06 / Technical reference

Duration, easing, and implementation

Technical values support the examples above. Keep these details secondary in human-facing guidance.

Motion tokensFour durations and two easing curves
motion.duration.fast

--od-duration-fast

120ms
motion.duration.base

--od-duration-base

180ms
motion.duration.slow

--od-duration-slow

420ms
motion.duration.reveal

--od-duration-reveal

720ms
motion.easing.standard

--od-ease-standard

0.32, 0.72, 0, 1
motion.easing.emphasis

--od-ease-emphasis

0.16, 1, 0.3, 1
Cause → motion → result contractRequired annotation for new motion patterns

Cause

Name the builder action or system event.

Motion

Name the property, direction, duration, and easing.

Result

Name the stable state and reduced-motion fallback.

Implementation boundaryCSS preference, governed transitions, and controls
  • Use the public --od-duration-* and --od-ease-* tokens.
  • Use Motion only for governed, purposeful transitions that need orchestration.
  • Keep loops under five seconds and expose immediate pause whenever movement repeats.
  • Under reduced motion, render the final state without waiting for an animation timer.