"use client"; import React, { useRef, CSSProperties } from "react"; import { motion, useMotionValue, useSpring, useTransform, MotionStyle, } from "framer-motion"; interface HolographicCardProps { children?: React.ReactNode; className?: string; style?: CSSProperties; } export function HolographicCard({ children, className, style, }: HolographicCardProps) { const cardRef = useRef(null); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const foilAngle = useMotionValue(0); const springConfig = { stiffness: 200, damping: 25 }; const rotateX = useSpring(useTransform(mouseY, [-1, 1], [15, -15]), springConfig); const rotateY = useSpring(useTransform(mouseX, [-1, 1], [-15, 15]), springConfig); const springFoilAngle = useSpring(foilAngle, { stiffness: 150, damping: 20 }); const foilGradient = useTransform( springFoilAngle, (angle) => `conic-gradient(from ${angle}deg, #ff0080, #ff8c00, #40e0d0, #8000ff, #ff0080)` ); const foilX = useTransform(mouseX, [-1, 1], ["30%", "70%"]); const foilY = useTransform(mouseY, [-1, 1], ["30%", "70%"]); const handleMouseMove = (e: React.MouseEvent) => { const card = cardRef.current; if (!card) return; const rect = card.getBoundingClientRect(); const cx = rect.left + rect.width / 2; const cy = rect.top + rect.height / 2; const nx = (e.clientX - cx) / (rect.width / 2); const ny = (e.clientY - cy) / (rect.height / 2); mouseX.set(nx); mouseY.set(ny); foilAngle.set(nx * 180); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); foilAngle.set(0); }; const cardStyle: MotionStyle = { rotateX, rotateY, transformStyle: "preserve-3d", borderRadius: 16, background: "#0d0d14", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset", position: "relative", overflow: "hidden", willChange: "transform", }; return (

{/* Foil overlay */} {/* Shimmer edge */} {/* Content */}

{children}

); } export default HolographicCard;

Holographic Card