fix: performance issues

components/Reveal.tsx

@@ -1,26 +1,26 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { m, LazyMotion, domAnimation } from 'framer-motion';
+import React from "react";
+import { m } from "framer-motion";
 
 interface RevealProps {
   children: React.ReactNode;
   className?: string;
   delay?: number;
-  direction?: 'up' | 'down' | 'left' | 'right';
+  direction?: "up" | "down" | "left" | "right";
   fullWidth?: boolean;
   viewportMargin?: string;
-  trigger?: 'inView' | 'mount';
+  trigger?: "inView" | "mount";
 }
 
 export const Reveal = ({
   children,
-  className = '',
+  className = "",
   delay = 0,
-  direction = 'up',
+  direction = "up",
   fullWidth = false,
   viewportMargin = "-50px",
-  trigger = 'inView'
+  trigger = "inView",
 }: RevealProps) => {
   const directions = {
     up: { y: 30 },
@@ -30,35 +30,45 @@ export const Reveal = ({
   };
 
   return (
-    <LazyMotion features={domAnimation}>
     <m.div
       initial={{
         opacity: 0,
-        ...directions[direction]
+        ...directions[direction],
       }}
-      animate={trigger === 'mount' ? {
-        opacity: 1,
-        x: 0,
-        y: 0
-      } : undefined}
-      whileInView={trigger === 'inView' ? {
-        opacity: 1,
-        x: 0,
-        y: 0
-      } : undefined}
-      viewport={trigger === 'inView' ? { once: true, margin: viewportMargin } : undefined}
+      animate={
+        trigger === "mount"
+          ? {
+              opacity: 1,
+              x: 0,
+              y: 0,
+            }
+          : undefined
+      }
+      whileInView={
+        trigger === "inView"
+          ? {
+              opacity: 1,
+              x: 0,
+              y: 0,
+            }
+          : undefined
+      }
+      viewport={
+        trigger === "inView"
+          ? { once: true, margin: viewportMargin }
+          : undefined
+      }
       transition={{
         type: "spring",
         stiffness: 50,
         damping: 20,
         mass: 1,
-        delay: delay
+        delay: delay,
       }}
-      className={`${fullWidth ? 'w-full' : ''} ${className} motion-fix`}
+      className={`${fullWidth ? "w-full" : ""} ${className} motion-fix will-change-[transform,opacity]`}
     >
       {children}
     </m.div>
-    </LazyMotion>
   );
 };
 
@@ -68,13 +78,12 @@ interface StaggerProps {
   staggerDelay?: number;
 }
 
-export const Stagger = ({ 
-  children, 
-  className = '', 
-  staggerDelay = 0.1 
+export const Stagger = ({
+  children,
+  className = "",
+  staggerDelay = 0.1,
 }: StaggerProps) => {
   return (
-    <LazyMotion features={domAnimation}>
     <m.div
       initial="initial"
       whileInView="animate"
@@ -90,6 +99,5 @@ export const Stagger = ({
     >
       {children}
     </m.div>
-    </LazyMotion>
   );
 };