Glowing Card

1"use client";
2import React from "react";
3import { motion, useMotionValue, useTransform } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6interface GlowingCardProps {
7  className?: string;
8  width?: number;
9  height?: number;
10  children?: React.ReactNode;
11}
12 
13const GlowingCard: React.FC<GlowingCardProps> = ({
14  className = "",
15  width = 256,
16  height = 160,
17  children,
18}) => {
19  const mouseX = useMotionValue(0);
20  const mouseY = useMotionValue(0);
21 
22  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
23    const { clientX, clientY, currentTarget } = event;
24    const { left, top } = currentTarget.getBoundingClientRect();
25    mouseX.set(clientX - left);
26    mouseY.set(clientY - top);
27  };
28 
29  const background = useTransform(
30    [mouseX, mouseY],
31    ([x, y]) => `
32      radial-gradient(
33        circle at ${x}px ${y}px,
34        rgba(0, 0, 0, 0.3) 0%,
35        rgba(0, 0, 0, 0) 70%
36      ),
37      linear-gradient(to right, #e2e8f0, #cbd5e0)
38    `,
39  );
40 
41  const darkBackground = useTransform(
42    [mouseX, mouseY],
43    ([x, y]) => `
44      radial-gradient(
45        circle at ${x}px ${y}px,
46        rgba(255, 255, 255, 0.3) 0%,
47        rgba(255, 255, 255, 0) 70%
48      ),
49      linear-gradient(to right, #4a5568, #2d3748)
50    `,
51  );
52 
53  return (
54    <div className={cn("flex items-center justify-center", className)}>
55      <motion.div
56        className={cn(
57          "relative cursor-pointer overflow-hidden rounded-lg",
58          "transition-shadow duration-300",
59          "dark:hidden",
60        )}
61        style={{
62          width,
63          height,
64          background: background,
65        }}
66        onMouseMove={handleMouseMove}
67        initial={{
68          background: "linear-gradient(to right, #e2e8f0, #cbd5e0)",
69        }}
70        transition={{ duration: 0.2, ease: "easeOut" }}
71      >
72        <motion.div
73          className={cn(
74            "absolute inset-[1px] flex flex-col justify-between rounded-[7px] p-4",
75            "bg-gray-100",
76          )}
77        >
78          {children}
79        </motion.div>
80      </motion.div>
81 
82      <motion.div
83        className={cn(
84          "relative cursor-pointer overflow-hidden rounded-lg",
85          "transition-shadow duration-300",
86          "hidden dark:block",
87        )}
88        style={{
89          width,
90          height,
91          background: darkBackground,
92        }}
93        onMouseMove={handleMouseMove}
94        initial={{
95          background: "linear-gradient(to right, #4a5568, #2d3748)",
96// … truncated