"use client"; import React, { useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, HTMLMotionProps } from "framer-motion"; import { Magnet, Zap, Target } from "lucide-react"; // --- TYPES --- export type MagneticVariant = "cyan" | "violet" | "emerald"; export interface MagneticFocusCardProps extends Omit, "ref"> { /** Internal content */ children?: React.ReactNode; // <-- AQUÍ ESTABA EL ERROR. Corregido a ReactNode. /** High-contrast color palette */ variant?: MagneticVariant; /** React 19 native ref support */ ref?: React.Ref; } /** * Magnetic Focus Card (v3.1 Infinity Ultra) * A premium interactive card designed to behave like a strong physical magnet. * It features aggressive translations, 3D rotations, internal parallax, * and electric bimodal lighting. Strictly fluid (h-fit). */ export const MagneticFocusCard = ({ children, variant = "cyan", className, ref: externalRef, ...props }: MagneticFocusCardProps) => { const internalRef = useRef(null); const activeRef = (externalRef as React.RefObject) || internalRef; // Track normalized mouse coordinates (-0.5 to 0.5) const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); // --- KINEMATICS & PHYSICS --- // A heavy, magnetic spring physics configuration (low mass, high damping) const springConfig = { damping: 25, stiffness: 200, mass: 1 }; const smoothX = useSpring(mouseX, springConfig); const smoothY = useSpring(mouseY, springConfig); // 1. THE MAGNETIC PULL: Physical Translation (moving the card towards the cursor) const translateX = useTransform(smoothX, [-0.5, 0.5], [20, -20]); const translateY = useTransform(smoothY, [-0.5, 0.5], [20, -20]); // 2. THE MAGNETIC ANGLE: Physical Rotation (3D perspective tilt) const rotateX = useTransform(smoothY, [-0.5, 0.5], [15, -15]); const rotateY = useTransform(smoothX, [-0.5, 0.5], [-15, 15]); // 3. INTERNAL PARALLAX: Child element offset (for objects inside the card) const parallaxX = useTransform(smoothX, [-0.5, 0.5], [-10, 10]); const parallaxY = useTransform(smoothY, [-0.5, 0.5], [-10, 10]); const handleMouseMove = (e: React.MouseEvent) => { if (!activeRef.current) return; const rect = activeRef.current.getBoundingClientRect(); // Normalize coordinates so the center is 0, edges are +/- 0.5 const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; mouseX.set(x); mouseY.set(y); }; const handleMouseLeave = () => { // Snap back to absolute zero with a smooth physics release mouseX.set(0); mouseY.set(0); }; // --- VARIANT CONFIGURATIONS --- // High saturation neon colors that contrast aggressively against light and dark backgrounds. const configs: Record = { cyan: { border: "border-cyan-500", glow: "from-cyan-500/20 via-transparent to-transparent dark:from-cyan-500/30", grid: "bg-[linear-gradient(to_right,#06b6d420_1px,transparent_1px),linear-gradient(to_bottom,#06b6d420_1px,transparent_1px)]", accent: "text-cyan-600 dark:text-cyan-400", }, violet: { border: "border-violet-500", glow: "from-violet-500/20 via-transparent to-transparent dark:from-violet-500/30", grid: "bg-[linear-gradient(to_right,#8b5cf620_1px,transparent_1px),linear-gradient(to_bottom,#8b5cf620_1px,transparent_1px)]", accent: "text-violet-600 dark:text-violet-400", }, emerald: { border: "border-emerald-500", glow: "from-emerald-500/20 via-transparent to-transparent dark:from-emerald-500/30", grid: "bg-[linear-gradient(to_right,#10b98120_1px,transparent_1px),linear-gradient(to_bottom,#10b98120_1px,transparent_1px)]", accent: "text-emerald-600 dark:text-emerald-400", }, }; const current = configs[variant]; return (

{/* --- ELECTRIC BACKGROUND SYSTEM --- */}

{/* Static high-contrast grid lines */}

{/* Internal Parallex Glow: This layer moves opposite the card, enhancing depth */}

{/* --- CONTENT LAYER (Children go here) --- */} {/* We use group-hover:text-black/white to fix potential contrast issues with neons */}

{children}

); }; // ============================================================= // DEMO IMPLEMENTATION FOR VAULT REGISTRY // ============================================================= export default function MagneticFocusCardDemo() { return (

{/* Header Section */}

QuantumCore™

Field Stabilizer

{/* Body Section */}

Magnetic focus engine version v3.1 U activated. Direct spatial manipulation protocols established. Bypassing interface gravity friction.

{/* Footer Section */}

Active Field BINDING_CURSOR

); }