[ @sdxc/u/responsive ]
motionSafe
Sugar over media("(prefers-reduced-motion: no-preference)", input).
import { motionSafe } from "@sdxc/u/responsive";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:
<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:
Hover me
<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.
u.hover(u.motionSafe(u.transitionDuration("150ms")))Signature
u.motionSafe(input: UtilityInput<Node>)