performance

components/Reveal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 
 interface RevealProps {
   children: React.ReactNode;
@@ -26,9 +26,10 @@ export const Reveal = ({
   };
 
   return (
-    <motion.div
-      initial={{ 
-        opacity: 0, 
+    <LazyMotion features={domAnimation}>
+    <m.div
+      initial={{
+        opacity: 0,
         ...directions[direction] 
       }}
       whileInView={{ 
@@ -47,7 +48,8 @@ export const Reveal = ({
       className={`${fullWidth ? 'w-full' : ''} ${className} motion-fix`}
     >
       {children}
-    </motion.div>
+    </m.div>
+    </LazyMotion>
   );
 };
 
@@ -63,7 +65,8 @@ export const Stagger = ({
   staggerDelay = 0.1 
 }: StaggerProps) => {
   return (
-    <motion.div
+    <LazyMotion features={domAnimation}>
+    <m.div
       initial="initial"
       whileInView="animate"
       viewport={{ once: true, margin: "-50px" }}
@@ -77,6 +80,7 @@ export const Stagger = ({
       className={className}
     >
       {children}
-    </motion.div>
+    </m.div>
+    </LazyMotion>
   );
 };