design

components/TileGrid.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+
+export const TileGrid = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="absolute inset-0 pointer-events-none overflow-hidden z-[5]">
+      {/* The lighting tiles (actual squares) */}
+      <div className="absolute inset-0 grid grid-cols-8 md:grid-cols-12 grid-rows-8 md:grid-rows-12">
+        {[...Array(144)].map((_, i) => (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0 }}
+            animate={{ 
+              opacity: [0, Math.random() > 0.92 ? 0.4 : 0, 0],
+            }}
+            transition={{ 
+              duration: 3 + Math.random() * 4, 
+              repeat: Infinity, 
+              delay: Math.random() * 10,
+              ease: "easeInOut"
+            }}
+            className="w-full h-full bg-accent/20 border border-accent/5"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};