Lesson 6: Motion & Micro-interactions — Dosage and Accessibility
You added a 600ms bounce to every button and it felt cool — until a user with motion sensitivity reported that the screen makes them dizzy. This lesson teaches you token-based motion: subtle transitions, purposeful micro-interactions, and respecting `prefers-reduced-motion` — not by killing the feed
Motion is like seasoning: a little improves the dish, too much ruins it, and some people are sensitive. For anyone who asked for less motion you don't serve a worse dish — you serve a calmer version: swap the strong spice for a mild one, without losing the flavor. Animation works the same: you remove the big movement, but you keep the feedback.
- transition token
- A fixed duration and easing value from a small set — for example `duration-200 ease-out` — so every transition in the UI feels uniform rather than random.
- micro-interaction
- A small visual feedback to a user action — a slight change on hover, press, or focus — that confirms something happened, without distracting.
- prefers-reduced-motion
- A system preference where a user asks to reduce motion (often due to vestibular sensitivity). 'Reduce' is not 'remove': an accessible UI strips the large movement but keeps the feedback — e.g. an instant state change instead of an animation.
- motion-reduce variant
- The Tailwind variant that applies classes only when the user requested reduced motion — e.g. `motion-reduce:transition-none` that removes a transition for them.
