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

src/app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { Footer } from "@/components/footer";
+import { PageTransitionProvider } from "@/components/page-transition-provider";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -36,7 +37,9 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <PageTransitionProvider>
+            {children}
+          </PageTransitionProvider>
           <Footer />
           <Toaster />
         </ThemeProvider>

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>
+  );
+}