Motion exists to signal state change — not to decorate. Every primitive respects
prefers-reduced-motion and falls back to
opacity-only transitions when the user has asked for reduced motion.
Hover over a row to trigger the animation.
linear standard in out inOut emphasised ts · component.tsx
import { durationMs, easingCss } from '@petanque-life/shared/motion';
<div style={{ transition: `opacity ${durationMs('base')}ms ${easingCss('standard')}` }} />