Credit Card

1"use client";
2 
3import {
4  motion,
5  useMotionValue,
6  useReducedMotion,
7  useSpring,
8  useTransform,
9} from "framer-motion";
10import { CreditCard as CreditCardIcon } from "lucide-react";
11import { useMemo, useState } from "react";
12interface CreditCardProps {
13  cardNumber?: string;
14  cardholderName?: string;
15  expiryDate?: string;
16  cvv?: string;
17}
18 
19const gradients = {
20  front:
21    "linear-gradient(145deg, hsl(var(--primary) / 0.45), hsl(var(--primary) / 0.18))",
22  back: "linear-gradient(145deg, hsl(var(--primary) / 0.45), hsl(var(--primary) / 0.18))",
23};
24 
25const overlayLights = [
26  "radial-gradient(circle at 20% 30%, hsl(var(--foreground) / 0.12), transparent 55%)",
27  "radial-gradient(circle at 80% 20%, hsl(var(--primary) / 0.22), transparent 60%)",
28  "radial-gradient(circle at 50% 80%, hsl(var(--accent) / 0.28), transparent 65%)",
29];
30 
31export function CreditCard({
32  cardNumber = "4532 1234 5678 9010",
33  cardholderName = "JORDAN PARK",
34  expiryDate = "09/27",
35  cvv = "123",
36}: CreditCardProps) {
37  const [isFlipped, setIsFlipped] = useState(false);
38 
39  const x = useMotionValue(0);
40  const y = useMotionValue(0);
41 
42  const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [6, -6]), {
43    stiffness: 280,
44    damping: 28,
45  });
46  const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-6, 6]), {
47    stiffness: 280,
48    damping: 28,
49  });
50 
51  const shouldReduceMotion = useReducedMotion();
52 
53  const overlayGradient = useMemo(() => overlayLights.join(","), []);
54 
55  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
56    if (shouldReduceMotion) return;
57    const rect = event.currentTarget.getBoundingClientRect();
58    const width = rect.width;
59    const height = rect.height;
60    const mouseX = event.clientX - rect.left;
61    const mouseY = event.clientY - rect.top;
62    const xPct = mouseX / width - 0.5;
63    const yPct = mouseY / height - 0.5;
64    x.set(xPct);
65    y.set(yPct);
66  };
67 
68  const handleMouseLeave = () => {
69    x.set(0);
70    y.set(0);
71  };
72 
73  const formatCardNumber = (number: string) => {
74    return number.replace(/(.{4})/g, "$1 ").trim();
75  };
76 
77  return (
78    <div className="flex items-center justify-center p-8 perspective-1000">
79      <motion.div
80        onMouseMove={handleMouseMove}
81        onMouseLeave={handleMouseLeave}
82        onClick={() => setIsFlipped(!isFlipped)}
83        className="relative h-[240px] w-[380px] cursor-pointer"
84        style={{
85          rotateX,
86          rotateY,
87          transformStyle: "preserve-3d",
88        }}
89// … truncated