39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
'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>
|
|
);
|
|
};
|