"use client"; import React, { useState } from "react"; import { motion, useMotionValue, useTransform } from "framer-motion"; import { Fingerprint, Target, BrainCircuit, UserCheck, ShieldCheck } from "lucide-react"; export default function BiometricScanCard() { // --- Motion Values for 3D Tilt Effect --- const x = useMotionValue(0); const y = useMotionValue(0); // Transform mouse position into rotation degrees (-10deg to 10deg) const rotateX = useTransform(y, [-100, 100], [10, -10]); const rotateY = useTransform(x, [-100, 100], [-10, 10]); const [isHovered, setIsHovered] = useState(false); // Handle mouse movement over the card function handleOnMouseMove(event: React.MouseEvent) { const rect = event.currentTarget.getBoundingClientRect(); const width = rect.width; const height = rect.height; const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; // Calculate position relative to center (-width/2 to width/2) const relativeX = mouseX - width / 2; const relativeY = mouseY - height / 2; x.set(relativeX); y.set(relativeY); } // Reset rotation when mouse leaves function handleMouseLeave() { setIsHovered(false); x.set(0); y.set(0); } return ( // Encapsulated & Bordered Outer Section

{/* 3D Tilt Wrapper */} setIsHovered(true)} > {/* Main Card Body - Reusable style */}

{/* Header */}

UIXTRA Security OS

V2.0_SYS

{/* Main Content (Biometric Data) */}

{/* Fingerprint Visualization with Depth */}

{/* Outer Ring Ambient Glow (V3+) */}

{/* Simulated System Data */}

Auth_Status AUTHENTICATED

Pattern_MATCH 99.8%

Core_Link: Active

Focus: Stable

{/* Footer Access Button */}

{/* ========================================================= 🔥 V3 INFINITY FEATURE: BIOMETRIC LASER SCANNER 🔥 ========================================================= */} {/* Layered absolutely *over* the main card content but inside tilt wrapper */}

{/* Main animated scanner element */} {/* Primary Laser Glow (High luminosity) */}

{/* Ultra-Bright Center Core (Laser beam) */}

{/* V3+ Detail: Secondary ambient light reflection */}

); }