Reduced motion

What changes when someone asks for less motion, and how to respect it in your own code.

Reduced motion is the mode buttery switches to when a person asks their system for less motion, or an app sets it with ButteryProvider reducedMotion="always". Every preset and component follows it on its own; code that animates something itself reads the same setting.

What changes

• Springs become instant: things land in their new place on the next frame.
• Reveals and appearances become plain fades of 100ms at most.
• Loops stop, and confetti doesn't fire.
• Hover lifts and arrow nudges are skipped.
• Layout still updates: a panel that changes size still changes size, just without animating.

Setting it for an app

ButteryProvider's reducedMotion decides when motion is reduced for everything inside it.

In your own code

Read the setting with a hook, or in CSS:

A progress bar that glides to its value on spring.smooth, and lands at once with reduced motion:

import type { ReactElement } from "react";
import { motion } from "motion/react";
import { useButteryTransition } from "@butteryui/core";

export function Progress({ done }: { readonly done: number }): ReactElement {
  const transition = useButteryTransition("smooth");
  return (
    <motion.div
      className="progress-bar"
      animate={{ scaleX: done }}
      transition={transition}
    />
  );
}