"use client"; import React, { useRef, useMemo } from "react"; import { motion, useMotionValue, useAnimationFrame } from "framer-motion"; import { Cpu } from "lucide-react"; const useMousePosition = (ref: React.RefObject) => { const x = useMotionValue(0); const y = useMotionValue(0); React.useEffect(() => { const el = ref.current; if (!el) return; const handleMove = (e: MouseEvent) => { const rect = el.getBoundingClientRect(); x.set(e.clientX - rect.left); y.set(e.clientY - rect.top); }; el.addEventListener('mousemove', handleMove); return () => el.removeEventListener('mousemove', handleMove); }, [ref, x, y]); return { x, y }; }; const VoxelCell = ({ mouseX, mouseY, r, c }: { mouseX: any, mouseY: any, r: number, c: number }) => { const ref = useRef(null); const [isActive, setIsActive] = React.useState(false); const center = React.useRef({ x: 0, y: 0 }); React.useEffect(() => { if (ref.current) { const rect = ref.current.getBoundingClientRect(); center.current = { x: c * 34 + 17, y: r * 55 + 27 }; } }, [r, c]); useAnimationFrame(() => { const dx = mouseX.get() - center.current.x; const dy = mouseY.get() - center.current.y; const dist = Math.sqrt(dx * dx + dy * dy); setIsActive(dist < 100); }); return ( ); }; const CardVoxel = () => { const ref = useRef(null); const { x, y } = useMousePosition(ref); const rows = 8; const cols = 10; const grid = useMemo(() => { const cells = []; for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { cells.push({ id: `${i}-${j}`, r: i, c: j }); } } return cells; }, []); return (

{grid.map((cell) => ( ))}

VOXEL

Proximity Distortion Field

); }; export default function CardVoxelPreview() { return ; }

Voxel Card