feat: animate page transitions with Motion

src/app/routes/RouteTransition.tsx

@@ -0,0 +1,25 @@
+import { domAnimation, LazyMotion, useReducedMotion } from "motion/react";
+import * as m from "motion/react-m";
+import type { FC, PropsWithChildren } from "react";
+import { useLocation } from "react-router";
+
+const RouteTransition: FC<PropsWithChildren> = (props) => {
+	const { children } = props;
+	const { pathname } = useLocation();
+	const reduceMotion = useReducedMotion();
+
+	return (
+		<LazyMotion features={domAnimation}>
+			<m.div
+				key={pathname}
+				initial={reduceMotion ? false : { opacity: 0 }}
+				animate={{ opacity: 1 }}
+				transition={{ duration: reduceMotion ? 0 : 0.2, ease: "easeOut" }}
+			>
+				{children}
+			</m.div>
+		</LazyMotion>
+	);
+};
+
+export { RouteTransition };