"use client"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; import { Fingerprint, Dna, ShieldCheck } from "lucide-react"; export default function BioSyntheticCapsuleCard() { const containerRef = useRef(null); const [isMounted, setIsMounted] = useState(false); // Motion values for tracking cursor position const mouseX = useMotionValue(160); const mouseY = useMotionValue(336); // Physics springs for organic tracking const smoothX = useSpring(mouseX, { stiffness: 120, damping: 20 }); const smoothY = useSpring(mouseY, { stiffness: 120, damping: 20 }); // Parallax transformations for the biometric eye const irisX = useTransform(smoothX, [0, 320], [-15, 15]); const irisY = useTransform(smoothY, [0, 672], [-20, 30]); const pupilX = useTransform(smoothX, [0, 320], [-6, 6]); const pupilY = useTransform(smoothY, [0, 672], [-8, 12]); const glareX = useTransform(smoothX, [0, 320], [4, -4]); const glareY = useTransform(smoothY, [0, 672], [6, -6]); // Subtle 3D tilt effect for the capsule const rotateX = useTransform(smoothY, [0, 672], ["4deg", "-4deg"]); const rotateY = useTransform(smoothX, [0, 320], ["-4deg", "4deg"]); useEffect(() => { setIsMounted(true); }, []); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); mouseX.set(e.clientX - rect.left); mouseY.set(e.clientY - rect.top); }; const handleMouseLeave = () => { mouseX.set(160); mouseY.set(336); }; if (!isMounted) { return (

); } return (

{/* Ambient background light */}

{/* Inner capsule glow */}

{/* --- TOP SECTION: Biometric Eye --- */}

{/* Scanning rings */}

{/* Interactive Iris */} {/* Iris texture */}

{/* Pupil */} {/* Micro-sensor */}

{/* Light glare */}

{/* --- CENTER SECTION: Identity Data --- */}

Genome Valid

Architect.

Clearance 01

{/* Animated EKG */}

{/* Baseline */}

{/* --- BOTTOM SECTION: Authentication Button --- */}

); }