Lumina

Manuals / Motion for Product / Ch 6

B · PatternsIntermediate30 min read

6. Accessibility & performance

Motion for Product · 36 pages source format

prefers-reduced-motion is mandatory. Vestibular triggers (large zooms, parallax) can harm. Prefer transform/opacity for perf.

What you'll learn

  • Reduced motion
  • Vestibular safety
  • Compositor-friendly props

Respect reduced motion

Replace motion with instant state or simplified fade.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Do this now

Add a reduced-motion variant to one prototype or CSS snippet.

Clear?

Checklist