perf: completely lazy load framer-motion core via DynamicFramerMotion wrapper

components/providers/DynamicFramerMotion.tsx

@@ -0,0 +1,7 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+export const DynamicFramerMotion = dynamic(
+  () => import('./FramerMotionProvider').then((mod) => mod.FramerMotionProvider),
+  { ssr: true }
+);

components/providers/FramerMotionProvider.tsx

@@ -0,0 +1,11 @@
+'use client';
+import { LazyMotion } from 'framer-motion';
+const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
+
+export function FramerMotionProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <LazyMotion features={loadFeatures} strict>
+      {children}
+    </LazyMotion>
+  );
+}

components/providers/TransitionProvider.tsx

@@ -2,9 +2,6 @@
 
 import React, { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-import { LazyMotion } from 'framer-motion';
-
-const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
 
 interface TransitionContextType {
   isTransitioning: boolean;
@@ -71,9 +68,7 @@ export function TransitionProvider({ children }: { children: ReactNode }) {
           setTransitionMessage={setTransitionMessage}
         />
       </React.Suspense>
-      <LazyMotion features={loadFeatures}>
-        {children}
-      </LazyMotion>
+      {children}
     </TransitionContext.Provider>
   );
 }