Reduced-motion aware wrapper
tsx
import { useReducedMotion } from '@/components/motion/reduced-motion';
import { motionTokens } from '@atelier/design-tokens';
export function FadeIn({ children }: Readonly<{ children: React.ReactNode }>) {
const reduceMotion = useReducedMotion();
if (reduceMotion) return <>{children}</>;
return (
<motion.div
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: motionTokens.tier2.duration, ease: motionTokens.tier2.easing }}
>
{children}
</motion.div>
);
}