Every animation, behind a switch

I love motion in an interface. A panel that eases open, a glow that drifts, a number that counts up — done well, it makes a site feel built rather than assembled. But motion is not free, and for some people it is not harmless. Vestibular disorders, migraine, motion sensitivity: for those users, a parallax flourish is not delight, it is a headache.

So I work to one rule, and I do not bend it: if it moves, it has to be able to stop.

The switch already exists

You do not have to invent the preference. Operating systems already expose it — "Reduce motion" on macOS and iOS, "Show animations" on Windows, the equivalent on Android. The browser hands it to CSS as prefers-reduced-motion. The user has already told their device how they want to be treated. Our only job is to listen.

Every animation I write is wrapped so that this holds:

@media (prefers-reduced-motion: reduce) {
  /* no transform-driven motion, no autoplay drift, no parallax */
}

In this studio that is not a nice-to-have I remember on a good day. It is a rule that blocks the work from shipping: an animation that is not gated for reduced motion is treated as a defect, the same as a broken link.

Reduce does not mean delete

The mistake people make is treating "reduced motion" as "no feedback". That is not the deal. A user who turns motion down still needs to know a menu opened or a form succeeded — they just should not be moved through space to learn it.

So the reduced path keeps the information and drops the travel. A panel still appears; it does not fly in. A state change still reads; it cross-fades or simply switches instead of sliding. Opacity is usually fine. Big positional sweeps are not. You are removing the disorientation, not the meaning.

This is design, not a checkbox

It is tempting to file this under "accessibility compliance" and move on. But honestly, building the reduced path makes me design the motion better in the first place. If a screen completely falls apart the moment the animation is removed, the animation was carrying meaning it should never have been trusted with. Motion should enhance a layout that already works — not be the layout.

The same principle covers the rest of it: enough colour contrast to read in real light, one clear heading order per page, real labels on icon-only buttons, a keyboard that can reach everything a mouse can. None of it is exotic. It is just done, on purpose, every time.

That care is baked into every website I build — not bolted on at the end when a client gets an accessibility complaint. If you are not sure whether your current site works for everyone who lands on it, book a free intro call and we will go through it together.