"use client"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform, useMotionTemplate } from "framer-motion"; import { Orbit, Component, Boxes, Zap, ChevronRight, Layers, Globe } from "lucide-react"; export default function NexusFragment3DCard() { const containerRef = useRef(null); const [isMounted, setIsMounted] = useState(false); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springConfig = { damping: 20, stiffness: 150 }; const smoothX = useSpring(mouseX, springConfig); const smoothY = useSpring(mouseY, springConfig); const rotateX = useTransform(smoothY, [-0.5, 0.5], ["15deg", "-15deg"]); const rotateY = useTransform(smoothX, [-0.5, 0.5], ["-15deg", "15deg"]); const layer1X = useTransform(smoothX, [-0.5, 0.5], [-12, 12]); const layer1Y = useTransform(smoothY, [-0.5, 0.5], [-12, 12]); const layer2X = useTransform(smoothX, [-0.5, 0.5], [20, -20]); const layer2Y = useTransform(smoothY, [-0.5, 0.5], [20, -20]); const spotlightX = useTransform(smoothX, [-0.5, 0.5], [0, 400]); const spotlightY = useTransform(smoothY, [-0.5, 0.5], [0, 500]); const backgroundGlow = useMotionTemplate` radial-gradient( 450px circle at ${spotlightX}px ${spotlightY}px, rgba(139, 92, 246, 0.15), transparent 80% ) `; useEffect(() => { setIsMounted(true); }, []); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const xPct = (e.clientX - rect.left) / rect.width - 0.5; const yPct = (e.clientY - rect.top) / rect.height - 0.5; mouseX.set(xPct); mouseY.set(yPct); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); }; if (!isMounted) return

; return (

Nexus V3

SPATIAL
COMPUTING

{[Boxes, Component, Globe].map((Icon, i) => (

))}

Multi-layer architecture

Efficiency 99.8%

Protocol L-04

); }