[ @sdxc/u/responsive ]

motionReduce

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

<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:

Hover me

<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.

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

Signature

u.motionReduce(input: UtilityInput<Node>)