performance

components/TileGrid.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
+import { m, LazyMotion, domAnimation } from 'framer-motion';
 
 export const TileGrid = () => {
   const [mounted, setMounted] = useState(false);
@@ -17,26 +17,27 @@ export const TileGrid = () => {
 
   return (
     <div className="absolute inset-0 pointer-events-none overflow-hidden z-[1]">
+      <LazyMotion features={domAnimation}>
       <div className="flex flex-col gap-3 min-w-[120%] min-h-[120%] -left-[10%] -top-[10%] absolute">
         {[...Array(rows)].map((_, rowIndex) => (
-          <div 
-            key={rowIndex} 
+          <div
+            key={rowIndex}
             className="flex gap-3 justify-center"
-            style={{ 
+            style={{
               transform: rowIndex % 2 === 0 ? 'translateX(0)' : 'translateX(80px)',
             }}
           >
             {[...Array(cols)].map((_, colIndex) => (
-              <motion.div
+              <m.div
                 key={`${rowIndex}-${colIndex}`}
                 initial={{ opacity: 0.05 }}
-                animate={{ 
+                animate={{
                   opacity: [0.05, Math.random() > 0.9 ? 0.25 : 0.05, 0.05],
                   scale: [1, Math.random() > 0.9 ? 1.05 : 1, 1]
                 }}
-                transition={{ 
-                  duration: 5 + Math.random() * 5, 
-                  repeat: Infinity, 
+                transition={{
+                  duration: 5 + Math.random() * 5,
+                  repeat: Infinity,
                   delay: Math.random() * 20,
                   ease: "easeInOut"
                 }}
@@ -46,6 +47,7 @@ export const TileGrid = () => {
           </div>
         ))}
       </div>
+      </LazyMotion>
     </div>
   );
 };