Reduced motion is part of the craft

Prefers reduced motion is a request the visitor has already made in their system settings. A crafted site ships two versions of each move because of it: the motion you designed, and a still or instant version for the person who asked for less. Both versions carry the same information.

Hanabi treats the quiet version as part of the craft, reviewed before launch, on the marketing site and on product interfaces. Reduced motion is not a special mode you apologize for. It is the same page, with the movement removed wherever movement was only an enhancement.

What the setting is asking for

Operating systems let a person say they want less animation. Browsers expose that choice as the media feature prefers-reduced-motion. When the value is reduce, stylesheets can drop transitions, stop loops, and keep the layout still. The person does not have to find a switch buried in your footer, though a visible control can still help. The system setting is the one they have already taken the trouble to turn on.

People turn it on for different reasons. Some get sick from parallax, zoom, and large sliding panels. Some are distracted by anything that moves in the edge of their vision. Some are on a machine where animation stutters and makes the interface feel broken. You will not learn which reason applies. The respectful response is the same: honor the request.

The W3C Web Content Accessibility Guidelines are the shared standard for this, not a house style guide. WCAG explains how to make web content more accessible to people with disabilities. Content includes text, images, and the code that defines presentation. WCAG 2.2 organizes that guidance under four principles: perceivable, operable, understandable, and robust. A page that keeps moving when someone has asked it to stop is harder to perceive, harder to operate, and harder to understand. Meeting the standard is a conformance question for the whole site. Shipping the quiet version of each move is the piece a design and engineering team can do on every project without waiting for a formal audit.

Two versions, one piece of information

Design the still page first. Headline, sections, links, and states should make sense as a document. Then add the move that shows a relationship or a change of state. Then write the reduced rule that removes the move.

A small pattern covers most marketing pages:

```css
.panel {
transition: transform 200ms ease, opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
.panel {
transition: none;
}
}
```

The panel can still appear. It appears in place, immediately. The visitor who wants motion sees the short transition. The visitor who asked for less does not sit through it, and does not lose the panel.

Apply the same pair to anything you animated on purpose.

• A menu that slid down now opens in its final position.
• A section that faded in on scroll is simply there when it scrolls into view.
• A hover that lifted a card now changes color or underline, with no travel.
• A looping background is gone. If the loop was the only visual interest, replace it with a still photograph or a clearer layout, not with a different loop.

Check for information that lived only inside the move. A diagram that "draws itself" so the order of steps appears needs those steps labeled in the still version. An onboarding hint that flies in from a button needs a sentence. If you cannot delete the animation and still explain the idea, the animation was doing the writing's job.

Duration set to zero is the usual quiet version. A very short cross-fade can be acceptable when an instant cut hides where a panel came from, and even that should be tested with the preference on. Loops do not get a slower loop. They get removed.

What may still move

Some motion is the status itself. A progress indicator for an upload, a spinner next to the word "Saving," a chart that is genuinely changing because the data changed. The W3C frames accessibility around people being able to operate and understand the content. Essential feedback can remain, and it should have words beside it. "Saving" is the accessible part. The spinner is the extra.

Be strict about what you call essential. A hero that pans across a photograph is not essential. A logo that redraws on every visit is not essential. A parallax story that moves the headline at a different rate from the body is not essential. Those are directions you liked. The quiet version deletes them.

Video is a separate control. If a film autoplays, it needs a way to pause, and it should start silent. Reduced motion is a reason to show the poster frame and a play button instead of starting the film at all. The person can still watch. They get to choose the moment.

Focus states, caret blink in a text field, and the scroll position changing because the person scrolled are not decoration. Leave the browser's ordinary behavior alone. The preference is about motion you added.

How a team checks the quiet version

Turn the preference on before you judge the page. On macOS it lives under Accessibility, Display, Reduce motion. On iOS it is in Accessibility settings as well. On Windows it is the animation setting under accessibility display options. Then reload. Do not trust a design file to represent this. The check is in the browser.

Walk the primary path. Open the menu, follow the main action, submit the form if there is one, and scroll the length of the page. You are looking for three failures.

1. Something is still looping or traveling a long distance.
2. Something that used to be explained by motion is now missing, so the quiet page is the broken page.
3. A transition was removed so abruptly that a control seems dead. Fix that with a still state change, such as a selected style, not by turning the travel back on.

Do this on a phone as well as a laptop. The preference is common on phones, and a thumb path with jumping panels is where vestibular problems show up first.

Hanabi's review includes this pass the way it includes a check of the headline and the primary action. A page that has only been watched by people with motion left on is half reviewed. The engineering is small. The discipline is remembering to look.

Where this sits beside the rest of the quality bar

Reduced motion is one part of an accessible page. Contrast, focus, names on controls, and text that can resize belong in the same definition of done. The companion piece is Accessibility as a design quality bar, which puts those requirements next to each other so none of them is treated as a later phase.

If you are deciding what to animate in the first place, keep the move that shows relationship or state, and pair it. If you are deciding whether a move should exist, the still page is the authority. A studio that can describe both versions in the proposal is a studio that has done this before.

Hanabi's services include marketing sites and product interfaces built with that pair in the schedule. Bring the page you have. The work is often a still layout that already says the right thing, plus one transition that knows how to get out of the way.