Skip to content

AccessibilityMotion

Motion

Motion is a recognition of the user, not an entertainment channel. The system respects prefers-reduced-motion at every level.

prefers-reduced-motion: reduceDrops transitions, not colorThree things always animate

The rule

When a user has prefers-reduced-motion: reduce set, the system drops all motion that changes the geometry of an element. Color and opacity transitions remain, because they don't trigger vestibular issues.

css
@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;
  }
}

Three things that always animate

There are three animations the system keeps, even when the user prefers reduced motion. They are the three that are necessary to indicate state, not the three that are aesthetically pleasing.

  1. The site-canvas fade-in. A 0.01ms equivalent opacity transition. The page is visible immediately, but the canvas is "ready" only after the data has loaded.
  2. The focus ring. The focus ring is not a transition; it is the indicator. It appears immediately.
  3. Toasts and dialogs. The open/close transition is 200 ms ease-out; under reduced motion, it becomes 0.01 ms (effectively instant).

Rules of thumb

  • Auto-playing animation longer than 5 seconds must be pausable.
  • Parallax and scroll-driven animation are not part of this system.
  • Hover animations that change the geometry of an element (translate, scale, rotate) are dropped under reduced motion. Color and border-color hover transitions remain.
  • The motion demos on the foundations pages show the live animation, but they each have a `@media (prefers-reduced-motion)` block that disables the demo.

What not to do