"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useAnimation } from "framer-motion"; import { cn } from "@/lib/utils"; interface BackgroundCellsProps { children?: React.ReactNode; className?: string; } export const BackgroundCells = ({ children, className }: BackgroundCellsProps) => { return (

{children && (

{children}

)}

); }; const BackgroundCellCore = () => { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const ref = useRef(null); const handleMouseMove = (event: React.MouseEvent) => { const rect = ref.current?.getBoundingClientRect(); if (rect) { setMousePosition({ x: event.clientX - rect.left, y: event.clientY - rect.top, }); } }; const size = 300; return (

); }; interface PatternProps { className?: string; cellClassName?: string; } const Pattern = ({ className, cellClassName }: PatternProps) => { const x = new Array(47).fill(0); const y = new Array(30).fill(0); const matrix = x.map((_, i) => y.map((_, j) => [i, j])); const [clickedCell, setClickedCell] = useState<[number, number] | null>(null); return (

{matrix.map((row, rowIdx) => (

{row.map((column, colIdx) => { const controls = useAnimation(); useEffect(() => { if (clickedCell) { const distance = Math.sqrt( Math.pow(clickedCell[0] - rowIdx, 2) + Math.pow(clickedCell[1] - colIdx, 2) ); controls.start({ opacity: [0, 1 - distance * 0.1, 0], transition: { duration: distance * 0.2 }, }); } }, [clickedCell]); return (

setClickedCell([rowIdx, colIdx])} >

); })}

))}

); };