visual upgrade

src/motion/index.tsx

@@ -22,7 +22,7 @@ export function FadeIn({
       initial={reduce ? false : { opacity: 0, y }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true, margin: "-10% 0px" }}
-      transition={{ duration: 0.4, ease: easeOut, delay }}
+      transition={reduce ? { duration: 0 } : { duration: 0.4, ease: easeOut, delay }}
     >
       {children}
     </motion.div>
@@ -40,11 +40,12 @@ export const staggerItem: Variants = {
 };
 
 export function Stagger({ children, className }: { children: React.ReactNode; className?: string }) {
+  const reduce = useReducedMotion();
   return (
     <motion.div
       className={className}
-      variants={staggerContainer}
-      initial="hidden"
+      variants={reduce ? undefined : staggerContainer}
+      initial={reduce ? false : "hidden"}
       whileInView="show"
       viewport={{ once: true, margin: "-10% 0px" }}
     >
@@ -53,7 +54,8 @@ export function Stagger({ children, className }: { children: React.ReactNode; cl
   );
 }
 export function StaggerItem({ children, className }: { children: React.ReactNode; className?: string }) {
-  return <motion.div className={className} variants={staggerItem}>{children}</motion.div>;
+  const reduce = useReducedMotion();
+  return <motion.div className={className} variants={reduce ? undefined : staggerItem}>{children}</motion.div>;
 }
 
 export { motion };