3D Layered Card

1"use client";
2import type React from "react";
3import { useState, useRef, useEffect } from "react";
4import { motion, useMotionValue, useSpring, useTransform } from "motion/react";
5import Image from "next/image";
6 
7interface CardProps {
8  logo: string;
9  mainImage: string;
10  title?: string;
11  children?: React.ReactNode;
12  className?: string;
13  width?: number | string;
14  height?: {
15    collapsed: number;
16    expanded: number;
17  };
18  logoSize?: number;
19  logoPosition?: {
20    expanded: number;
21  };
22  shineIntensity?: number;
23  backgroundColor?: string;
24  borderColor?: string;
25  borderWidth?: string;
26  textColor?: string;
27  glowColor?: string;
28  glowGradient?: string;
29  titlePosition?: number;
30}
31 
32export default function ThreeDLayeredCard({
33  logo,
34  mainImage,
35  title,
36  children,
37  className,
38  width = 288,
39  height = {
40    collapsed: 130,
41    expanded: 300,
42  },
43  logoSize = 64,
44  logoPosition = {
45    expanded: 15,
46  },
47  shineIntensity = 0.3,
48  backgroundColor = "bg-gradient-to-b from-[#FF9901] via-[#DF911A] to-[#724f13]",
49  borderColor,
50  borderWidth = "0",
51  textColor = "white",
52  glowColor = "rgba(255, 165, 0, 0.1)",
53  glowGradient = "#fde047",
54  titlePosition = 90,
55}: CardProps) {
56  const [isHovered, setIsHovered] = useState(false);
57  const [isExpanded, setIsExpanded] = useState(false);
58  const [isMobile, setIsMobile] = useState(false);
59  const ref = useRef<HTMLDivElement>(null);
60 
61  // Detect mobile devices
62  useEffect(() => {
63    const checkMobile = () => {
64      const isMobileDevice =
65        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
66          navigator.userAgent,
67        ) ||
68        window.innerWidth < 768 ||
69        "ontouchstart" in window;
70      setIsMobile(isMobileDevice);
71    };
72 
73    checkMobile();
74    window.addEventListener("resize", checkMobile);
75    return () => window.removeEventListener("resize", checkMobile);
76  }, []);
77 
78  // Constants for image sizing
79  const IMAGE_SIZE = 128;
80  const HALF_IMAGE_SIZE = IMAGE_SIZE / 2;
81  const HALF_LOGO_SIZE = logoSize / 2;
82 
83  // Mouse position tracking for 3D tilt effect
84  const x = useMotionValue(0);
85  const y = useMotionValue(0);
86 
87  // Spring animations for smooth movement
88  const mouseXSpring = useSpring(x, { stiffness: 400, damping: 30 });
89  const mouseYSpring = useSpring(y, { stiffness: 400, damping: 30 });
90 
91  // Transform mouse position to rotation values (reduced for mobile)
92  const rotateX = useTransform(
93    mouseYSpring,
94    [-0.5, 0.5],
95// … truncated