src/motion/variants.ts

@@ -41,11 +41,16 @@ export const staggerContainer: Variants = {
   },
 };
 
-/** Route enter/exit transition used with AnimatePresence. */
+/**
+ * Route enter/exit transition used with AnimatePresence (mode="wait"). The old
+ * page is removed instantly (exit duration 0) so it never lingers as a ghost
+ * frame behind the incoming page; only the new page animates, fading in. This
+ * keeps a visible transition without any cross-fade overlap.
+ */
 export const pageTransition: Variants = {
-  initial: { opacity: 0, y: 8 },
-  enter: { opacity: 1, y: 0, transition: { duration: 0.24, ease: EASE_OUT } },
-  exit: { opacity: 0, y: -6, transition: { duration: 0.16, ease: EASE_OUT } },
+  initial: { opacity: 0 },
+  enter: { opacity: 1, transition: { duration: 0.22, ease: EASE_OUT } },
+  exit: { opacity: 0, transition: { duration: 0 } },
 };
 
 /** Springy hover lift for cards. Use rest/hover states on an `m` element. */