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" } }) |
Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.motionSafe(u.transitionDuration("150ms"))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>)