iter 2

app/template.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { usePathname } from "next/navigation"
+import { motion } from "framer-motion"
 
 import { Header } from "@widgets/Header"
 
@@ -12,7 +13,7 @@ export default function EssentialTemplate({
 	children: React.ReactNode
 }) {
 	const pathname = usePathname()
-	const isAuthPage = AUTH_ROUTES.includes(pathname)
+	const isAuthPage = AUTH_ROUTES.includes(pathname ?? "")
 
 	if (isAuthPage) {
 		return <>{children}</>
@@ -21,7 +22,14 @@ export default function EssentialTemplate({
 	return (
 		<div>
 			<Header />
-			{children}
+			<motion.div
+				key={pathname}
+				initial={{ opacity: 0, y: 8 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
+			>
+				{children}
+			</motion.div>
 		</div>
 	)
 }