# motionSafe

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

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

Sugar over `media("(prefers-reduced-motion: no-preference)", input)`. Styles
apply only when the user has not asked for less motion, so a missing
wrapper safely defaults to no animation.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.motionSafe(u.transitionDuration("150ms"))` | `css({ "@media (prefers-reduced-motion: no-preference)": { transitionDuration: "150ms" } })` |

## Examples

### Basic example

Use `motionSafe(...)` to apply animations and transitions only when the reader has not asked for less motion. Turn on Reduce motion in your system's accessibility settings to stop the square:

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

### Gating a transition

Wrap a transition so the state change still happens for everyone but animates only for readers who have not asked for less motion. Hover the card, then try again with Reduce motion on:

```tsx
<div
	mix={[
		motionSafe(transition("transform", { duration: 300 })),
		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.motionSafe(u.transitionDuration("150ms")))
```

## Signature

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