prefers-reduced-motion

Detect the OS accessibility setting live, simulate both modes in-page, and compare removing animation vs replacing motion with fades.

Live detection & simulation

Your browser reports the real OS setting via matchMedia('(prefers-reduced-motion: reduce)'). Use the preview toggle to simulate either mode without changing system settings.

OS setting: detecting…
Preview mode

Interactive preview

Card slides + scales in with a parallax background. Under reduced motion, movement is replaced by an opacity cross-fade — feedback stays, vestibular triggers go.

Notification

Full motion: slide + scale. Reduced: calm fade only.

Showing: full motion

Remove vs replace

Stripping all transitions leaves users with zero feedback. Swapping slide for fade preserves "something changed" without simulating self-motion.

✕ Remove animation (bad)
Toast snaps — no cue

Under reduce: transition: none. Element appears instantly with no indication of change.

✓ Replace with fade (good)
Toast fades in calmly

Under reduce: opacity cross-fade only. Position/scale motion removed, feedback preserved.

CSS strategies

/* Accessible default — motion is additive */
.modal {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .modal {
    animation: modal-in 220ms ease-out;
  }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal {
    transition: opacity 200ms ease;
  }
}

Use opt-in for new components; keep a global reset as insurance. In JS, mirror the query with matchMedia and listen for change.