Reduced Motion for Rich Experiences

The prefers-reduced-motion media query is one of the most important additions to CSS in recent years. It gives users who experience motion sensitivity - from vestibular disorders to migraines to simple preference - a way to tell the browser that they need less movement. The browser passes that preference to the page, and the page adapts.

Most pages handle this badly. They either ignore the preference entirely, continuing to animate regardless, or they strip all visual dynamism from the page, leaving a static, lifeless version that feels like a punishment for having a medical condition. Neither approach is acceptable.

The correct approach is translation. The animated experience and the reduced-motion experience should feel like the same design translated into different registers. The atmospheric intent is preserved. The narrative structure is preserved. The informational content of every transition is preserved. Only the physical movement is removed.

What reduced motion means

Reduced motion does not mean no visual change. It means no physical movement. The distinction is critical and widely misunderstood.

An element that fades in is changing, but it is not moving. An element that changes colour is changing, but it is not moving. An element that appears instantly where it will live is changing state, but it is not moving.

An element that slides across the screen is moving. An element that rotates is moving. An element that bounces or scales up from zero is moving. These are the visual events that cause physical discomfort for people with vestibular sensitivity.

The prefers-reduced-motion media query targets the second category. Pages should remove or replace sliding, rotating, bouncing, and scaling animations while preserving opacity changes, colour transitions, and instant state changes.

Preserving atmosphere without motion

Atmosphere on this site is built from four layers: colour, spacing, typography, and timing. Only one of these layers - timing - is directly affected by reduced motion. The other three are fully available regardless of motion preference.

Colour creates environmental tone. A background that shifts from warm parchment to cool graphite between sections creates the feeling of moving through different spaces. This shift can happen instantly rather than gradually, and the environmental effect is preserved. The reader still perceives the change of place. They just do not perceive it as a continuous transition.

Spacing creates rhythm and hierarchy. Generous whitespace between sections creates pause and breath. This is entirely independent of motion. The spacing is the same whether the page animates or not.

Typography creates editorial voice. The relationship between heading scales, body text, and pull quotes establishes an information hierarchy that works identically with and without animation.

What changes in the reduced-motion version is the fourth layer: timing. In the animated version, elements enter through transitions. In the reduced-motion version, elements are present from the moment the section enters the viewport. The entrance is instant rather than gradual.

This instant entrance preserves the information - this element is new, it belongs to this section - without the physical stimulus that would cause discomfort. The reader knows what appeared and where it sits in the hierarchy. They simply did not watch it travel there.

Practical CSS patterns

The standard pattern for reduced-motion support involves writing the animated version as the default and the reduced-motion version as an override:

An element with a scroll-triggered entrance might normally translate upward by 20 pixels and fade from zero to full opacity over 400 milliseconds. With prefers-reduced-motion: reduce, the same element should appear at full opacity in its final position with no transition delay.

The CSS structure is straightforward. Define the animation on the base class. Add a media query block that sets transition-duration to 0.01ms and removes transform offsets. The element appears instantly in place.

For scroll-triggered animations driven by JavaScript class changes, the reduced-motion override should also remove the initial hidden state. If elements are normally set to opacity: 0 and transform: translateY(20px) until a JavaScript observer adds an active class, the reduced-motion override should set opacity: 1 and transform: none on the base state. This ensures that elements are visible even if JavaScript fails or has not yet initialised.

Maintaining narrative flow

Narrative flow in the animated version relies on staggered entrances and timed transitions. In the reduced-motion version, this temporal dimension collapses. Everything in a section appears at once when the section enters the viewport.

The visual hierarchy must be strong enough to guide the reader through the content without temporal cues. Heading size, position, and contrast must clearly indicate reading order. The spatial arrangement must make the sequence obvious.

This is the practical test described in When Motion Guides Attention: if the attention hierarchy works without animation, the design is fundamentally sound. If it only works with animation, the design has a dependency that reduced motion will expose.

For the Journey page, the reduced-motion version preserves the chapter structure, the journey rail, the colour shifts between sections, and the typographic hierarchy. What it removes is the staggered entrance timing and the scroll-linked transitions. The result is a page that reads as a well-structured editorial piece rather than an animated sequence. The atmospheric quality is different but not diminished.

Opacity as the bridge

Opacity transitions occupy an interesting middle ground. They do not involve physical movement, but they do involve visual change over time. Technically, a fade-in is not the kind of motion that causes vestibular distress. Practically, it is a visual transition that prefers-reduced-motion was designed to control.

The pragmatic approach is to keep opacity transitions but make them very short in reduced-motion mode - perhaps 100 milliseconds instead of 400 milliseconds. This preserves a subtle visual signal that an element is new without creating the sustained change that might cause discomfort.

Different practitioners handle this differently. Some remove all transitions entirely. Some keep opacity but remove transform. Some use a blanket transition: none. The right approach depends on the specific audience and the specific design. For this site, very short opacity transitions are retained in reduced-motion mode, and all transform-based transitions are removed.

Testing reduced motion

Testing reduced-motion support requires checking the design at every stage, not just applying the override at the end and hoping it works.

Every time a new animation is added to the page, the reduced-motion version should be tested immediately. The question is: does the page still make sense? Does the hierarchy still work? Is any content hidden behind an animation trigger that will not fire without motion?

Browser developer tools allow toggling prefers-reduced-motion without changing the operating system setting. In Chrome DevTools, the Rendering panel includes a dropdown for emulating reduced motion. This should be used regularly during development, not just as a final check.

The most common failure mode is elements that remain invisible because their initial state is opacity: 0 and the animation trigger was not overridden for reduced motion. The second most common failure mode is layout shifts caused by transform overrides that change element positioning. Both are avoidable through systematic testing.

Respect as design principle

Reduced motion is not a feature. It is respect. Respect for users whose neurological conditions make motion physically uncomfortable. Respect for the diversity of the web’s audience. Respect for the principle that good design includes rather than excludes.

The work required to support reduced motion well is not large. It is a media query and a few property overrides per animated element. The design effort is in maintaining atmospheric quality without motion, which is a useful discipline regardless of accessibility concerns.

Motion Language covers the broader framework for motion decisions. The Performance section addresses how reduced-motion overrides can also improve rendering performance on constrained devices.