[dyad] Adding a page transition effect - wrote 4 file(s), added framer-motion package(s)

src/components/page-transition-provider.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+export function PageTransitionProvider({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div key={pathname}>
+        {children}
+
+        {/* Exit Animation Overlay */}
+        <motion.div
+          className="fixed top-0 left-0 z-50 w-full h-screen bg-white dark:bg-background origin-bottom"
+          initial={{ scaleY: 0 }}
+          animate={{ scaleY: 0 }}
+          exit={{ scaleY: 1 }}
+          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+        />
+
+        {/* Enter Animation Overlay */}
+        <motion.div
+          className="fixed top-0 left-0 z-50 w-full h-screen bg-white dark:bg-background origin-top"
+          initial={{ scaleY: 1 }}
+          animate={{ scaleY: 0 }}
+          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+        />
+      </motion.div>
+    </AnimatePresence>
+  );
+}