# motionReduce

> Sugar over `media("(prefers-reduced-motion: reduce)", input)`.

```ts
import { motionReduce } from "@sdxc/u/responsive";
```

Sugar over `media("(prefers-reduced-motion: reduce)", input)`.

Prefer `u.motionSafe()` when there is a choice: declaring motion only
inside the positive query lets a missing wrapper fall back to no motion.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.motionReduce(u.transitionDuration("0s"))` | `css({ "@media (prefers-reduced-motion: reduce)": { transitionDuration: "0s" } })` |

## Examples

### Basic example

Use `motionReduce(...)` to apply utilities when the reader asks for less motion, like stopping an animation. Turn on Reduce motion in your system's accessibility settings to stop the square:

```tsx
<div
	mix={[
		animation({
			keyframes: { to: { rotate: "1turn" } },
			duration: "1.5s",
			easing: "linear",
			iterationCount: "infinite",
		}),
		motionReduce(raw({ animationName: "none" })),
		is(16),
		bs(16),
		...,
	]}
/>
```

### Removing a transition

Remove a transition with `motionReduce(transitionProperty("none"))`, so the change still happens without the animation. Hover the card, then try again with Reduce motion on:

```tsx
<div
	mix={[
		transition("transform", { duration: 300 }),
		motionReduce(transitionProperty("none")),
		hover(translateY(-2)),
		...,
	]}
>
	Hover me
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.motionReduce(u.transitionDuration("0s")))
```

## Signature

```ts
u.motionReduce(input: UtilityInput<Node>)
```