"use client"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform, useMotionTemplate } from "framer-motion"; import { ScanLine, Radio, Fingerprint, Activity } from "lucide-react"; export default function OrbitalAccessKeycard() { const containerRef = useRef(null); const [isMounted, setIsMounted] = useState(false); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springConfig = { stiffness: 150, damping: 25 }; const smoothX = useSpring(mouseX, springConfig); const smoothY = useSpring(mouseY, springConfig); const rotateX = useTransform(smoothY, [-0.5, 0.5], ["12deg", "-12deg"]); const rotateY = useTransform(smoothX, [-0.5, 0.5], ["-12deg", "12deg"]); const glareX = useTransform(smoothX, [-0.5, 0.5], [0, 100]); const glareY = useTransform(smoothY, [-0.5, 0.5], [0, 100]); const coreX = useTransform(smoothX, [-0.5, 0.5], [-15, 15]); const coreY = useTransform(smoothY, [-0.5, 0.5], [-15, 15]); const glareBackground = useMotionTemplate` radial-gradient( 800px circle at ${glareX}% ${glareY}%, rgba(34, 211, 238, 0.2), transparent 50% ) `; 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 (

{[...Array(5)].map((_, i) => (

))}

Broadcasting

Access
Keycard

Entity ID GUEST_884_A9

Clearance

Omega

); }